/* ============================================================
   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; }
/* deslogado: só o nome da casa, no canto, sem "EM Questões" embaixo (ordem do dono, 17/09/2026:
   "tira esse nome em questões"; 10:49: "coloca no canto" — centralizado não agradou) */
body.auth-mode .topbar { justify-content: flex-start; }
body.auth-mode .topbar .b-sub { display: none; }
body.auth-mode .topbar .b-name { font-size: 16px; letter-spacing: 0.5px; }

@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; margin-bottom: 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;
}
/* 07/09/2026: apoio em PARÁGRAFOS. O `pre-wrap` de antes colava um parágrafo no
   outro em texto longo (conto inteiro), e o aluno lia um paredão. */
.suporte p { margin: 0 0 10px; }
.suporte p:last-child { margin-bottom: 0; }
.suporte-rot {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 8px;
}
/* texto longo abre cortado, com o botão de abrir por cima do degradê */
.suporte-longo .suporte-corpo { max-height: 15.5em; overflow: hidden; position: relative; }
.suporte-longo .suporte-corpo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em;
  background: linear-gradient(to bottom, transparent, var(--bg-3));
}
.suporte-longo.aberto .suporte-corpo { max-height: none; }
.suporte-longo.aberto .suporte-corpo::after { display: none; }
.suporte-mais {
  margin-top: 8px; background: none; border: 0; padding: 4px 0;
  color: var(--brand); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}

.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);
}
/* 14/09/2026 (dono: "não coloca um abaixo do outro"): os botões da questão dividem a MESMA linha —
   o .btn tem width:100%, e com flex-basis:auto cada um tomava uma linha inteira. */
.q-acoes .btn { flex: 1 1 0; width: auto; min-width: 0; padding-inline: 12px; }
.q-acoes .btn-nav { flex: 0 0 auto; min-width: 54px; }
.q-acoes .btn-rev { flex: 0 0 100%; }
.q-acoes .btn-sm { flex: 0 1 auto; min-width: 0; }
@media (max-width: 520px) { .q-acoes .btn { font-size: 13.5px; padding: 12px 8px; } }
@media (min-width: 900px) { .q-acoes { position: static; background: none; padding: 0; } }

/* Acesso ao avanço antes da correção: no tablet a barra de baixo não é fixa
   e pode ficar várias telas abaixo do gabarito. */
.q-acoes-topo { display: flex; justify-content: flex-end; margin: 14px 0 12px; }
.q-acoes-topo .btn { width: auto; min-width: 150px; }

/* ---------- 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;
  /* acima de TODA camada (o cartão de lançamento é z 400): aviso escondido é aviso que não existe */
  z-index: 1000; 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);
}
/* "Conheça nossos materiais" embaixo do login (dono, 17/09/2026) — site de vendas; some no app da Play */
.auth-materiais {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 14px; padding: 14px 16px; text-align: center; text-decoration: none; color: var(--text);
}
.auth-materiais b { color: var(--brand); }
.auth-materiais small { color: var(--muted); font-size: 12px; }

/* 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); }
}
/* 26/09/2026 (aluno: "não consta XP nas questões, pra mim não aparece"): com "Reduzir movimento" ligado, a regra
   geral encurta a animação para 0,01 ms e o "forwards" prende o último quadro (opacidade 0) — o +XP nunca aparecia.
   Aqui ele fica parado e visível até o app removê-lo (1,3 s). */
@media (prefers-reduced-motion: reduce) {
  .xp-float { animation: none !important; opacity: 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; }
/* curso do aluno ao lado do nome no ranking do simulado (13/09/2026) */
.rk-curso { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; vertical-align: middle; padding: 1px 6px; margin-left: 6px; border-radius: 6px; color: var(--brand); background: rgba(255,176,1,.10); border: 1px solid rgba(255,176,1,.35); white-space: nowrap; }
.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: 16px; } /* iOS: <16px dá zoom ao focar */

/* ---- 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); }
/* ABAS DOS CONCURSOS DO ALUNO (25/08/2026, caso Dalton): quem tem mais de um
   material não troca de curso — alterna entre os que são dele, aqui na capa. */
.teo-capa-cursos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.teo-capa-cursos .chip { font-size: 12.5px; padding: 7px 13px; }
.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 --- */
/* LEITOR "ABRE E FECHA" (áudio de aluno, 03/09/2026): no celular a barra do
   navegador some ao rolar para baixo e volta ao rolar para cima, e 100dvh
   acompanha essa dança — o leitor encolhia e crescia a cada gesto, tirando a
   atenção de quem lê. svh é a altura MENOR (barra visível) e não muda: o leitor
   fica parado; quando a barra some, sobra uma faixa do fundo embaixo, e só. */
.pdf-viewer { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100svh; 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 ===== */
/* A FAIXA SEGURA DO IPHONE (01/09/2026). O `bottom` era um número fixo e não
   contava `env(safe-area-inset-bottom)` — no iPhone com indicador de início a
   barra de navegação fica ~34px mais alta, e o cronômetro pousava EM CIMA do
   botão "Mais". Outros flutuantes deste arquivo já somavam a faixa; este não. */
#crono-fab { position: fixed; right: 14px; z-index: 60;
  bottom: calc(84px + env(safe-area-inset-bottom)); }
.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); }
/* rodapé da caixa com 3 botões (Zerar · Esconder · Fechar): repartem os 220 px,
   senão o terceiro sai cortado */
.crono-pop-rodape .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 11.5px; white-space: nowrap; }
.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: calc(78px + env(safe-area-inset-bottom)); } }

/* ===== 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-fig-inline { margin: 6px auto 10px; text-align: center; position: relative; }
/* 📌 SALVAR O INFOGRÁFICO NA APOSTILA (08/09/2026). Fica discreto embaixo da
   figura: o aluno só repara quando procura, e some da leitura quando salvo. */
.pdf-fig-salvar {
  display: table; margin: 6px auto 0; /* 09/10 dono: botão embaixo e centralizado, nunca ao lado da figura */ padding: 4px 10px;
  font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border); border-radius: 999px; opacity: .75;
}
.pdf-fig-salvar:hover { opacity: 1; }
.pdf-fig-salvar.on { color: var(--brand); border-color: var(--brand); opacity: 1; font-weight: 700; }
/* a figura dentro da apostila e do PDF do aluno */
.apo-fig { margin: 10px 0 6px; text-align: center; }
.apo-fig img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--apo-linha, rgba(128,128,128,.3)); }
.pdf-fig-inline canvas { max-width: min(1000px, 100%); width: auto; height: auto; border-radius: 10px; border: 1px solid rgba(255,176,1,.18); background: #fff; display: block; margin: 0 auto; }
/* recorte vetorial: é um pedaço da página, então ocupa a largura toda da coluna */
.pdf-fig-inline.pdf-fig-vetor canvas { max-width: 100%; width: 100%; border: 0; border-radius: 8px; }
/* FIGURA EM MOLDURA (27/09/2026): recorte da caixa da figura + legenda em texto embaixo, como no PDF.
   A imagem tem fundo branco (é a página): moldura clara em qualquer tema, largura da coluna, toque amplia. */
.pdf-fig-inline.pdf-fig-moldura { margin: 4px auto 18px; max-width: 720px; }
.pdf-fig-inline.pdf-fig-moldura canvas { display: block; width: 100%; max-width: 100%; height: auto; background: #fff; border: 1px solid rgba(128,128,128,.35); border-radius: 8px; padding: 6px; box-sizing: border-box; cursor: zoom-in; }
.pdf-fig-inline.pdf-fig-moldura figcaption { text-align: left; font-size: max(13px, calc(var(--pdf-fs, 18px) * .78)); line-height: 1.45; color: #b9b0a0; margin: 7px 2px 0; }
.pdf-fig-inline.pdf-fig-moldura figcaption b { color: #ece6d8; }
.pdf-fig-inline.pdf-fig-sotabela { margin-top: -8px; }
.pdf-fig-serve { display: block; margin-top: 2px; }
.pdf-fig-selo { display: inline-block; background: #FFB001; color: #241A05; font-weight: 800; font-size: .82em; padding: 0 5px; border-radius: 3px; letter-spacing: .2px; }
.pdf-read.tema-claro .pdf-fig-moldura figcaption, .pdf-read.tema-sepia .pdf-fig-moldura figcaption { color: #6b6457; }
.pdf-read.tema-claro .pdf-fig-moldura figcaption b, .pdf-read.tema-sepia .pdf-fig-moldura figcaption b { color: #2a2113; }
.pdf-read.tema-sepia .pdf-fig-moldura canvas { border-color: rgba(150,110,30,.35); }
.pdf-par.pdf-fig-oculto, .pdf-fig-trecho { display: none !important; }
body.pdf-tudo-orig .pdf-pagina .pdf-fig-moldura, .pdf-pagina.mostra-img .pdf-fig-moldura { display: none; }
#q-img-zoom.pdf-fig-zoom { display: block; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
#q-img-zoom.pdf-fig-zoom img { display: block; max-width: none; max-height: none; width: max(100%, 900px); height: auto; margin: 0 auto; padding: 6px; box-sizing: border-box; }
.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) */
/* …mas NUNCA com tempo em jogo (09/09/2026, "tá sumindo"): renderCronoChip põe
   .vivo quando o relógio corre ou guarda minutos, e aí o chip fica em toda tela */
body[data-rota="treino"] #crono-fab:not(.vivo),
body[data-rota="simulados"] #crono-fab:not(.vivo),
body[data-rota="ajustes"] #crono-fab:not(.vivo),
body[data-rota="planos"] #crono-fab:not(.vivo),
body[data-rota="comandante"] #crono-fab:not(.vivo) { 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;
}
/* GRIFO NO MODO TEXTO (o do caso Eccilha). São dois grifos diferentes com a
   MESMA classe: a camada `div.pdf-hl` que fica sobre a página desenhada (usa
   opacity + mix-blend-mode de propósito, para parecer marca-texto sobre o
   canvas) e este `mark.pdf-hl`, que é texto de verdade. Esta regra resetava
   position/display/color mas NÃO resetava `opacity: .38` nem o
   `mix-blend-mode` — então o texto grifado saía com contraste ~2,3 (o menos
   legível da página inteira, contra ~12 do texto normal). Aqui o mark volta a
   ser opaco e sólido; a cor de fundo vem do próprio grifo (style inline). */
.pdf-read .pdf-par mark.pdf-hl {
  position: static !important; display: inline; padding: .08em 0; border-radius: 3px;
  opacity: 1 !important; mix-blend-mode: normal !important;
  color: #1a1611 !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* NEGRITO DENTRO DO GRIFO SUMIA (08/09/2026, dono: "tem uma parte que não dá nem
   pra ver direito"). No tema escuro `.pdf-par b` é BRANCO — e branco sobre grifo
   amarelo é o pior contraste da tela. O que está dentro do grifo herda a cor do
   grifo, que já é escura nos três temas. Vale para o negrito, para as palavras em
   caixa alta e para as palavras-chave sublinhadas. */
.pdf-read .pdf-par mark.pdf-hl b,
.pdf-read .pdf-par mark.pdf-hl strong,
.pdf-read .pdf-par mark.pdf-hl .pdf-caps,
.pdf-read .pdf-par mark.pdf-hl .pdf-kw,
.apo-item mark b, .apo-item mark strong,
.apo-item mark .pdf-caps, .apo-item mark .pdf-kw { color: inherit !important; }
/* no tema escuro o fundo do grifo é claro e o texto escuro continua certo;
   o que não pode é o mark herdar o blend da camada do PDF (virava tarja oliva) */

/* 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}
/* GRIFO DO ALUNO NO CADERNO (26/08/2026): antes só aparecia a contagem. A borda
   é azul do marca-texto para separar do que ele ESCREVEU (borda dourada). */
.cad-grifo{display:block;width:100%;text-align:left;background:var(--bg-3);border:0;border-left:3px solid #7CC4FF;border-radius:6px;padding:7px 10px;margin:5px 0;font-size:12.5px;line-height:1.45;color:inherit;font-family:inherit;cursor:pointer}
.cad-grifo:hover,.cad-grifo:focus-visible{background:var(--bg-2);border-left-color:#B8DEFF;outline:none}
.cad-grifo-ir{display:block;margin-top:4px;font-size:10.5px;color:var(--txt-3);letter-spacing:.02em}
@keyframes cadPiscar{0%,100%{background:transparent}30%,60%{background:rgba(124,196,255,.28)}}
.cad-piscar{animation:cadPiscar 2.4s ease-in-out;border-radius:6px}
.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.cad-del-wrap{padding-right:38px}   /* o botão de excluir não cobre o texto (auditoria 10/09/2026) */
.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}
/* v532: página ainda não pintada mostra um esqueleto claro em vez de um bloco escuro ("tela preta") */
.pdf-pagina.pdf-lazy::before{content:"Carregando página " attr(data-p) "…";display:block;margin:24px auto;max-width:720px;padding:40px 0;text-align:center;color:#7a7367;font-size:13px;border:1px dashed #3a352b;border-radius:10px;background:linear-gradient(90deg,#1e1b15 0%,#252119 50%,#1e1b15 100%)}
.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}
/* "já estudei isso" (01/09/2026): fica ao lado de "Ver teoria" sem competir com
   ele — é a saída de quem já venceu o assunto, não a ação principal do cartão */
.mss-ja-vi{margin-left:6px;background:transparent;border-color:rgba(255,255,255,.18);color:var(--text-2)}
.mss-ja-vi:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:var(--text)}
.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; }
/* quando o aluno fecha o edital — linha do painel do mentor (27/08/2026) */
.fm-fim { color: var(--muted); font-size: 11px; }
.fm-fim b { font-size: 11px; color: var(--brand); }
.fm-estoura { font-style: normal; color: #E63946; 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: 16px; /* iOS: <16px dá zoom ao focar */
  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; }

/* contagem até a prova (05/10/2026): arte do Codex no fundo, texto por cima */
.cp-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 16px 16px 14px; color: #fff;
  border: 1px solid rgba(255,176,1,.45);
  background: linear-gradient(90deg, rgba(14,11,7,.97) 0%, rgba(14,11,7,.8) 40%, rgba(14,11,7,.1) 72%),
              url("assets/fundos/card-contagem.jpg") right center / auto 100% no-repeat, #15110b;
}
.cp-topo { display: flex; align-items: center; gap: 12px; padding-right: 108px; }
.cp-ic {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  color: #FFB001; background: rgba(255,176,1,.12); border: 1px solid rgba(255,176,1,.25);
}
.cp-tit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cp-tit small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.88); white-space: nowrap; }
.cp-tit b { font-size: 28px; line-height: 1.05; font-weight: 900; letter-spacing: -.01em; color: #FFB001;
  font-variant-numeric: tabular-nums; white-space: normal; }
.cp-share {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px;
  border-radius: 9px; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.6); color: #fff;
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
/* 05/10/2026 (dono): frase menor e mais baixa, na própria arte (ChatGPT), canto de cima livre para o botão */
.cp-share:hover { border-color: #FFB001; color: #FFB001; }
.cp-share:focus-visible { outline: 2px solid #FFB001; outline-offset: 2px; }
.cp-share::after { content: ""; position: absolute; inset: -6px; } /* área de toque >= 44px */
.cp-relogio { display: grid; grid-template-columns: minmax(0, 84px) repeat(2, minmax(0, 62px)); gap: 6px; margin-top: 12px; }
.cp-relogio div {
  text-align: center; padding: 7px 2px 6px; border-radius: 10px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18);
}
.cp-relogio b { display: block; font-size: 19px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cp-relogio small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.8); margin-top: 2px; }
@media (max-width: 440px) { /* celular: relógio mais estreito para não cobrir a frase da arte */
  .cp-relogio { grid-template-columns: minmax(0, 74px) repeat(2, minmax(0, 52px)); gap: 5px; }
  .cp-relogio b { font-size: 17px; } .cp-relogio small { font-size: 8px; letter-spacing: .04em; }
}
@media (max-width: 360px) {
  .cp-topo { padding-right: 52px; } .cp-tit b { font-size: 25px; } .cp-relogio { grid-template-columns: minmax(0, 74px) repeat(2, minmax(0, 46px)); gap: 4px; }
  .cp-share span { display: none; } .cp-share { width: 44px; min-height: 44px; padding: 0; 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 > .cp-card { grid-column: 1 / -1; } /* 05/10: contagem em linha inteira, abaixo da sequência */
  .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); }

/* o que o app já contou na baixa: é informação, não campo — por isso não parece
   um input (08/09/2026, a pergunta "além dessas, fez mais alguma por fora?") */
.bx-app-conta {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--text); font-size: 13px; line-height: 1.45;
}
.bx-app-conta b { font-size: 18px; color: var(--brand); font-variant-numeric: tabular-nums; }
.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: 16px; /* iOS: <16px dá zoom ao focar (baixa de meta no celular) */
  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); }
/* 14/09/2026: sem a imagem carregada não há caixa branca (era a "bolinha" que o dono viu) */
.q-img:not(.ok) { background: transparent; padding: 0; box-shadow: none; min-height: 0; }
.q-img-falha { margin: 12px auto 4px; width: auto; font-size: 13.5px; }
#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); }
/* 07/10/2026: botão "Resumo Tático" do assunto — quem não tem o módulo vê o
   cadeado em destaque (mesma cor da marca que o resto dos cadeados de venda). */
.teo-resumo-bloqueado { color: var(--brand); font-weight: 800; }
.teo-resumo-bloqueado svg { color: var(--brand); }
@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: #a5a098; 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; }
/* QUESTÃO DA BANCA (24/09/2026): questão oficial de prova dentro da leitura — azul-institucional, com a origem */
.pdfq.pdfq-banca { background: linear-gradient(180deg, rgba(64,132,255,.10), rgba(64,132,255,.03)); border: 1px solid rgba(96,150,255,.55); box-shadow: inset 4px 0 0 #4f8cff; }
.pdfq.pdfq-banca:focus-within { border-color: rgba(96,150,255,.9); box-shadow: inset 4px 0 0 #4f8cff, 0 0 0 2px rgba(79,140,255,.18); }
.pdfq-banca-rot { color: #8fb4ff; }
.pdfq-origem { margin: -3px 0 11px; font-size: 12px; font-weight: 700; color: #a9c2f5; letter-spacing: .01em; }
.pdfq-selo.anulada { color: #2b1d00; background: #ffc44d; }
.pdfq.pdfq-anulada { box-shadow: inset 4px 0 0 #ffb001; border-color: rgba(255,176,1,.55); }
.pdfq-alt.marcada { outline: 2px solid #ffb001; outline-offset: -2px; }
.pdf-read.tema-claro .pdfq.pdfq-banca, .pdf-read.tema-sepia .pdfq.pdfq-banca { background: #eef3ff; border-color: #9db8f0; }
.pdf-read.tema-claro .pdfq-banca-rot, .pdf-read.tema-sepia .pdfq-banca-rot { color: #1d4fb8; }
.pdf-read.tema-claro .pdfq-origem, .pdf-read.tema-sepia .pdfq-origem { color: #33518f; }
.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; }
/* .45 dava contraste 2,1–3,7: reprova nos 3 temas. E é o pior lugar para
   apagar — quem errou precisa justamente LER as alternativas que não marcou. */
.pdfq-alt.apagada { opacity: .85; }
.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);
}
/* CASO ECCILHA (01/09/2026): "quando coloco na opção tema claro não dá pra ler
   a pergunta". O enunciado, as alternativas e a letra usam `color: inherit`, e
   os temas do leitor só pintavam `.pdf-par` — o bloco da questão NÃO é `.pdf-par`.
   Resultado: a questão herdava a cor clara do app e ficava texto branco sobre
   página branca. Aqui cada tema pinta o bloco INTEIRO, não só o parágrafo. */
.pdf-read.tema-claro .pdfq { color: #33312c; background: rgba(0,0,0,.025); border-color: rgba(180,120,10,.30); }
.pdf-read.tema-sepia .pdfq { color: #4a4234; background: rgba(0,0,0,.03);  border-color: rgba(150,110,30,.34); }
.pdf-read.tema-claro .pdfq-enun, .pdf-read.tema-sepia .pdfq-enun,
.pdf-read.tema-claro .pdfq-alt,  .pdf-read.tema-sepia .pdfq-alt { color: inherit; }
.pdf-read.tema-claro .pdfq-num, .pdf-read.tema-sepia .pdfq-num { color: #744e05; }
/* contexto e comentário liam var(--muted) / branco translúcido: some no claro */
.pdf-read.tema-claro .pdfq-contexto, .pdf-read.tema-sepia .pdfq-contexto {
  background: rgba(0,0,0,.05); color: #5c5648;
}
.pdf-read.tema-claro .pdfq-selo.neutro, .pdf-read.tema-sepia .pdfq-selo.neutro {
  background: rgba(0,0,0,.07); color: #5c5648;
}
.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,.05); color: #33312c; }
/* certa/errada mantêm o fundo de cor: o texto tem que acompanhar, não herdar */
.pdf-read.tema-claro .pdfq-alt.certa,  .pdf-read.tema-sepia .pdfq-alt.certa  { background: rgba(46,140,66,.16); border-color: #2e8c42; }
.pdf-read.tema-claro .pdfq-alt.errada, .pdf-read.tema-sepia .pdfq-alt.errada { background: rgba(178,40,32,.14); border-color: #b22820; }
.pdf-read.tema-claro .pdfq-alt.certa .pdfq-letra,  .pdf-read.tema-sepia .pdfq-alt.certa .pdfq-letra  { background: #1f7a38; color: #fff; }
.pdf-read.tema-claro .pdfq-alt.errada .pdfq-letra, .pdf-read.tema-sepia .pdfq-alt.errada .pdfq-letra { background: #b22820; color: #fff; }
.pdf-read.tema-claro .pdfq-selo.ok,  .pdf-read.tema-sepia .pdfq-selo.ok  { background: #1f7a38; color: #fff; }
.pdf-read.tema-claro .pdfq-refazer, .pdf-read.tema-sepia .pdfq-refazer { color: #744e05; border-color: rgba(116,78,5,.5); }
.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; }
/* comentário em parágrafos (25/09/2026): explicação, uma linha por alternativa e o "Bizu:" separados */
.pdfq-coment-p { margin: .55em 0 0; }
.pdfq-coment > b + .pdfq-coment-p { margin-top: .45em; }
.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; }

/* METAS DO DIA NA FRENTE (07/09/2026) — quando o lançamento vem do cronômetro,
   a lista das metas de hoje é a primeira escolha; o "por fora" fica no fim. */
.ef-metalista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ef-meta-op {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  box-sizing: border-box; cursor: pointer; font: inherit;
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  transition: border-color .18s cubic-bezier(.25,1,.5,1), background .18s cubic-bezier(.25,1,.5,1);
}
.ef-meta-op:hover { border-color: var(--brand); }
.ef-meta-op.on {
  border-color: var(--brand);
  border-left-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, var(--bg-3));
}
.ef-meta-op b { font-size: .92rem; font-weight: 700; }
.ef-meta-op small { font-size: .82rem; color: var(--text-2); line-height: 1.35; }
.ef-meta-op span { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ef-meta-fora { flex-direction: row; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .ef-meta-op { transition: none; } }

/* ── 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); }
/* histórico de notas da prova (relançamento liberado em 01/09/2026) */
.ef-sim-hist {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; margin: 0 0 10px;
  font-size: .84rem; color: var(--text);
}
.ef-sim-hist > b { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.ef-sim-hist-linha b { color: var(--brand); }
.ef-sim-hist-obs { font-size: .76rem; color: var(--text-2); margin-top: 4px; line-height: 1.4; }
.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. */
/* A linha da atrasada virou DUAS portas (22/08, pedido do Luiz Andrey): abrir o
   material e marcar como concluída. O container deixou de ser <button> — botão
   dentro de botão é HTML inválido e o ✓ não receberia clique. */
.mss-atraso-item {
  display:flex; align-items:stretch; gap:8px; width:100%;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:10px; color:var(--text);
  transition:border-color .18s ease, background .18s ease;
}
.mss-atraso-item:hover, .mss-atraso-item:focus-within {
  border-color:var(--brand); background:#332C22;
}
.mss-atraso-abrir {
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  background:none; border:none; text-align:left; color:inherit;
  padding:10px 0 10px 11px; cursor:pointer; font:inherit;
}
.mss-atraso-ok {
  flex-shrink:0; width:44px; min-height:44px; background:none; cursor:pointer;
  border:none; border-left:1px solid var(--border);
  color:var(--brand); font-size:17px; font-weight:900; line-height:1;
  border-radius:0 9px 9px 0;
}
.mss-atraso-ok:hover, .mss-atraso-ok:focus-visible {
  background:var(--brand); color:#15110C;
}
.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; }

/* ESCOLHA DA LÍNGUA ESTRANGEIRA (07/09/2026) — mora ao lado de "Sua semana",
   no cabeçalho do cronograma. Só é pintado em concurso com as duas línguas. */
.opb-idioma { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:9px; font-size:12.5px; }
.opb-idioma-rot { opacity:.78; }
.opb-idioma-bt {
  background:none; border:1px solid var(--linha, rgba(128,128,128,.35)); border-radius:999px;
  padding:3px 11px; font:inherit; font-size:12px; cursor:pointer; color:inherit; opacity:.85;
  min-height:28px;
}
.opb-idioma-bt:hover { opacity:1; }
.opb-idioma-bt.ativo {
  border-color:var(--brand); color:var(--brand); font-weight:700; opacity:1;
  box-shadow:inset 0 0 0 1px var(--brand);
}
.opb-idioma-nota { font-size:11.5px; opacity:.6; }

/* CAIXA E VENDAS (07/09/2026) — os botões de período vinham com o tamanho do .btn geral:
   o ativo ficava enorme e em caixa-alta, e os quatro quebravam em duas linhas. Aqui todos
   têm a MESMA caixa, cabem numa linha só e o ativo muda de cor, não de tamanho. */
.cx-titulo { font-size:11px; color:var(--text-2); margin:12px 0 6px; }
.cx-per { display:flex; gap:6px; margin:0 0 8px; }
.cx-per-bt {
  flex:1 1 0; min-width:0; text-align:center;
  background:none; border:1px solid var(--linha, rgba(128,128,128,.35)); border-radius:999px;
  padding:5px 4px; font:inherit; font-size:12.5px; line-height:1.2; text-transform:none;
  color:inherit; opacity:.8; cursor:pointer; min-height:30px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cx-per-bt:hover { opacity:1; }
.cx-per-bt.ativo { border-color:var(--brand); color:var(--brand); font-weight:700; opacity:1; box-shadow:inset 0 0 0 1px var(--brand); }
.cx-card { flex:1 1 130px; min-width:130px; }
.cx-card .cx-rot { font-size:11px; }
.cx-card .cx-valor { font-size:18px; display:block; }
.cx-card .cx-n { font-size:11px; }
.cx-card .cx-liq { font-size:11px; opacity:.75; margin-top:1px; }
.cx-parcial { opacity:.65; }

/* dica do teclado na questão (07/09/2026, sugestão de aluno) — discreta, só em quem tem teclado */
.alt-tecla { margin-top:9px; font-size:11.5px; color:var(--text-2); opacity:.75; letter-spacing:.01em; }
.alt-tecla b { font-weight:700; opacity:.95; }

/* ============================================================
   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 CAMADA DE TEXTO ENGOLIA O CLIQUE DA QUESTÃO (04/09/2026, caso do Lucas Kauê:
   "às vezes não dá pra responder"). Quem usa "ver original" / "Ler o PDF" ganha
   nessa página uma camada invisível (.pdf-tl, z-index 3) que existe só para poder
   selecionar e copiar o texto do PDF. Ela cobre a página INTEIRA — inclusive os
   blocos de questão, que são HTML de verdade — e a camada FICA depois de voltar
   ao texto. Resultado: o aluno via a alternativa, tocava nela e não acontecia
   nada; o toque morria na camada. Reproduzido e conferido com clique real na
   conta de QA: no mesmo ponto, sem esta regra o selo continua "responda aqui";
   com ela, responde e abre o gabarito. Vale em qualquer modo, porque a camada
   sobrevive à troca. A seleção de texto segue funcionando no resto da página. */
.pdfq { position: relative; z-index: 4; }
/* 04/10/2026 (Klayrane): página que não mostra o PDF não pode ter a camada invisível por cima do texto */
body:not(.pdf-tudo-orig) .pdf-pagina:not(.mostra-img) .pdf-tl { display: none; }
/* 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;
}
/* CASO ECCILHA (01/09/2026): "grifo pelo celular vejo em amarelo, no computador
   fica assim" — tarja escura por cima do texto. A classe do tema é escrita no
   #pdf-read (pdfTema: read.className = "pdf-read tema-X ..."), NUNCA no body —
   então `body...tema-escuro` jamais casava e o grifo ficava sempre em
   `multiply`. Multiply sobre página escura escurece: vira tarja. O seletor
   agora é o do elemento que realmente recebe a classe. */
.pdf-read.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; }
/* 06/09/2026: a pausa grava a sessão — esta linha diz isso na cara do aluno,
   senão o relógio "voltando" parece tempo perdido. Vazia, não ocupa espaço. */
#crono-full .cf-lancado { color: var(--green, #47c07a); font-size: 13px; font-weight: 700; min-height: 0; }
#crono-full .cf-lancado:empty { display: none; }
#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: #F4F0E7;   /* fundo fixo escuro: texto fixo claro, em qualquer tema */
  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; }
.pdf-read.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}

/* ============================================================
   A-047 (23/08) — iPhone dá ZOOM em qualquer campo com fonte < 16px,
   e ao fechar o teclado a página fica deslocada. A regra base (linha ~447)
   já põe 16px, mas várias regras depois dela reintroduzem 13–14px:
   .disc-form textarea (13.5), .fm/.bx (14), .fm-met-campos (13).
   No desktop o tamanho menor é proposital e continua valendo; em tela de
   toque, o mínimo volta a ser 16px. Só isso — nada de layout muda.
   ============================================================ */
@media (pointer: coarse) {
  .disc-form textarea,
  .fm .input, .fm textarea, .fm select,
  .bx-linha input, .bx textarea,
  .fm-met-campos .input, .fm-met-dias .input,
  .com-novo textarea, .com-responder textarea {
    font-size: 16px;
  }
}

/* QG DO COMPRADOR AVULSO — respiro dos blocos que não são .card (22/08/2026).
   O espaçamento da tela vem de `.card + .card { margin-top: 12px }`. A sequência
   de dias é uma <section class="dash-seq"> e o progresso da leitura vive num
   invólucro <div id="qg-teoria-prog"> — nenhum dos dois é .card, então os dois
   quebravam a corrente: encostavam no bloco de cima E tiravam a margem do bloco
   de baixo. Na mentoria isso não aparece porque lá eles moram dentro de
   `.dash { gap: 10px }`. Aqui a margem é explícita, nos dois sentidos. */
.qg-seq, #qg-teoria-prog { margin-top: 12px; }
.qg-seq + *, #qg-teoria-prog + * { margin-top: 12px; }

/* BUSCA DENTRO DO FILTRO DE QUESTÕES (24/08)
   Matéria e assunto viraram listas longas demais para rolar procurando: em
   PMPE passam de 200 chips. O campo fica grudado no topo da lista, então
   continua à mão enquanto o aluno rola o resultado da própria busca. */
.fq-busca {
  margin: 0 0 10px;
  width: 100%;
  /* NADA de position:sticky aqui. A lista de chips (.fq-meio .chips) já rola
     dentro da PRÓPRIA caixa, então o campo nunca sai de vista sozinho. Com
     sticky ele se soltava no rolar da página e flutuava por cima dos chips —
     e, sendo transparente, o texto do chip aparecia ATRAVÉS dele. Foi o
     "texto totalmente fora do quadrado" que o dono viu em 24/08. */
}
.fq-busca::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); cursor: pointer; }
.fq-vazio {
  padding: 14px 2px;
  font-size: 13px;
  color: var(--muted);
}

/* DEVOLUTIVA — a semana de cada mentorado no Painel do comandante (24/08).
   Mesma leitura do relatório que eu gerava à mão, agora vivo: tarja por
   situação, o dia com a data em cima, e a tabela de assunto por último —
   é ela que responde "quantas questões? quantas acertou por assunto?". */
.devo-card { border-left: 5px solid var(--bg-3); padding: 14px 16px; margin-bottom: 10px; }
.devo-subiu { border-left-color: #35D07F; }
.devo-caiu  { border-left-color: #FF5B47; }
.devo-novo  { border-left-color: var(--brand); }
.devo-zerou { border-left-color: #FFA426; }
.devo-nunca { border-left-color: #FF5B47; background: rgba(255, 91, 71, 0.05); }
.devo-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.devo-topo b { font-size: 15.5px; }
.devo-tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
            border: 1px solid var(--bg-3); border-radius: 99px; padding: 2px 8px; margin-left: 8px; white-space: nowrap; }
.devo-zap { font-size: 12.5px; color: #06210f; background: #25D366; border-radius: 8px;
            padding: 6px 12px; text-decoration: none; white-space: nowrap; font-weight: 700; }
.devo-mail { font-size: 11.5px; color: var(--muted); text-decoration: none; border: 1px dashed var(--bg-3);
             border-radius: 8px; padding: 5px 9px; }
/* AS DUAS MENSAGENS DA SEMANA (31/08/2026). Balões, na ordem em que ele manda:
   primeiro o "Qap, <Nome>", depois o resumo. Fica acima do roteiro porque é o
   que o mentor usa; o roteiro vira consulta. */
/* botão de estorno no Caixa (31/08). Discreto por padrão, vermelho no hover:
   é ação de dinheiro, não pode competir visualmente com o resto da linha. */
.cx-estorno { flex-shrink: 0; font-size: 11px; font-family: inherit; color: var(--muted);
              background: transparent; border: 1px solid var(--bg-3); border-radius: 7px;
              padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.cx-estorno:hover { color: #fff; background: #c0392b; border-color: #c0392b; }
.devo-copiar { font-size: 12.5px; color: var(--text); background: var(--bg-3);
               border: 1px solid var(--bg-3); border-radius: 8px; padding: 6px 12px;
               white-space: nowrap; font-weight: 700; cursor: pointer; }
.devo-copiar:hover { border-color: var(--brand); color: var(--brand); }
.devo-msg { border: 1px solid var(--bg-3); border-radius: 11px; padding: 10px 11px;
            margin: 0 0 12px; background: rgba(37, 211, 102, 0.04); }
.devo-msg-cab { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
                color: var(--muted); margin-bottom: 8px; }
.devo-linha { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
.devo-linha:last-child { margin-bottom: 0; }
.devo-num-msg { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; margin-top: 9px;
                background: var(--brand); color: #17130a; font-size: 11px; font-weight: 800;
                display: flex; align-items: center; justify-content: center; }
.devo-mini { flex-shrink: 0; margin-top: 7px; font-size: 11px; color: var(--muted);
             background: transparent; border: 1px solid var(--bg-3); border-radius: 7px;
             padding: 3px 8px; cursor: pointer; }
.devo-mini:hover { color: var(--brand); border-color: var(--brand); }
.devo-linha .devo-bal { flex: 1; margin-bottom: 0; }
.devo-bal { font-size: 13.5px; line-height: 1.5; color: var(--text); background: var(--bg-2);
            border-radius: 10px; padding: 8px 11px; margin-bottom: 6px; max-width: 560px; }
.devo-bal:last-child { margin-bottom: 0; }
ol.devo-rot { margin: 0; padding-left: 19px; font-size: 14px; }
ol.devo-rot li { padding: 2.5px 0; color: var(--muted); }
ol.devo-rot li b { color: var(--text); font-weight: 700; }
.devo-secao { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
              margin: 14px 0 7px; padding-top: 10px; border-top: 1px solid var(--bg-3); }
.devo-dia { border: 1px solid var(--bg-3); border-radius: 9px; overflow: hidden; margin-bottom: 7px; }
.devo-dcab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
             padding: 6px 10px; background: rgba(255, 176, 1, .09); border-bottom: 1px solid var(--bg-3); }
.devo-dcab b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.devo-dcab span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.devo-dia ul { list-style: none; margin: 0; padding: 4px 10px 7px; }
.devo-dia li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 3px 0; font-size: 13px;
               border-bottom: 1px solid rgba(128, 128, 128, .1); }
.devo-dia li:last-child { border-bottom: 0; }
.devo-mod { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; border-radius: 4px;
            padding: 2px 6px; background: var(--bg-3); color: var(--text); }
.devo-m-teoria { background: rgba(255, 176, 1, .18); color: var(--brand); }
.devo-m-exercicio { background: rgba(53, 208, 127, .16); color: #35D07F; }
.devo-m-revisao { background: rgba(255, 164, 38, .16); color: #FFA426; }
.devo-m-simulado { background: rgba(255, 91, 71, .16); color: #FF5B47; }
.devo-disc { font-weight: 700; }
.devo-ass { color: var(--muted); font-size: 12px; flex: 1 1 170px; }
.devo-num { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.devo-tab { overflow-x: auto; }
.devo-tab table { border-collapse: collapse; width: 100%; font-size: 13px; }
.devo-tab th, .devo-tab td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--bg-3); vertical-align: top; }
.devo-tab th { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.devo-tab td small { display: block; color: var(--muted); font-size: 11px; }
.devo-tab td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.devo-tab .bom, .devo-dcab i.bom { color: #35D07F; font-weight: 700; font-style: normal; }
.devo-tab .meio, .devo-dcab i.meio { color: #FFA426; font-weight: 700; font-style: normal; }
.devo-tab .ruim, .devo-dcab i.ruim { color: #FF5B47; font-weight: 700; font-style: normal; }

/* VALIDADE DA MENTORIA na devolutiva (24/08). O dono estava mandando devolutiva
   de estudo pra aluno com a mentoria vencida — a validade agora anda junto com
   o nome, e quem está no fim sobe pro topo do painel. */
.devo-val { font-size: 10.5px; letter-spacing: .04em; border-radius: 99px; padding: 2px 8px;
            margin-left: 7px; white-space: nowrap; border: 1px solid var(--bg-3); color: var(--muted); }
.devo-val-sem   { font-style: italic; }
.devo-val-mes   { color: #FFA426; border-color: rgba(255, 164, 38, .45); }
.devo-val-perto { color: #FFA426; border-color: rgba(255, 164, 38, .7); background: rgba(255, 164, 38, .12); font-weight: 700; }
.devo-val-fim   { color: #FF5B47; border-color: rgba(255, 91, 71, .7); background: rgba(255, 91, 71, .12); font-weight: 700; }
.devo-alerta { border-left: 5px solid #FFA426; }
.devo-fila { margin-top: 10px; }
.devo-fila-t { display: inline-block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
               border-radius: 99px; padding: 3px 10px; margin-bottom: 7px; }
.devo-fila-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
               padding: 7px 0; border-bottom: 1px solid var(--bg-3); }
.devo-fila-l:last-child { border-bottom: 0; }
.devo-fila-l b { font-size: 14px; }
.devo-fila-l span { color: var(--muted); font-size: 12.5px; }
.devo-fila-l .devo-zap, .devo-fila-l .devo-mail { margin-left: auto; }
.devo-vencida { border-left-color: #FF5B47; background: rgba(255, 91, 71, .05); }
.devo-vencendo { border-left-color: #FFA426; }

/* A TELA DO EX-ALUNO DA MENTORIA (24/08). Não é cadeado de venda: é convite de
   volta. Por isso não usa o visual do paywall — tem selo, respiro e o preço de
   aluno em destaque. */
.renovar-card { border-left: 5px solid var(--brand); text-align: left; }
.renovar-topo { margin-bottom: 8px; }
.renovar-selo {
  display: inline-block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); background: rgba(255, 176, 1, .14); border: 1px solid rgba(255, 176, 1, .4);
  border-radius: 99px; padding: 3px 10px; margin-bottom: 8px;
}
.renovar-topo b { display: block; font-size: 15.5px; line-height: 1.35; }
.renovar-txt { font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.renovar-btn { width: 100%; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.renovar-pe { font-size: 12px; margin: 8px 0 0; text-align: center; }

/* CHECK DE CONTATO na devolutiva (24/08) — o controle diário do dono. */
.devo-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.devo-check {
  font-size: 12px; border: 1.5px solid var(--bg-3); background: transparent; color: var(--muted);
  border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.devo-check.on { border-color: #35D07F; color: #35D07F; background: rgba(53, 208, 127, .1); font-weight: 700; }
.devo-contato { border-left-color: #35D07F; opacity: .85; }

/* placar por matéria do simulado externo (24/08) */
.ef-ext-linha { display: grid; grid-template-columns: 1fr 88px 88px; gap: 6px; margin-bottom: 6px; }

/* Selo de META FIXA (24/08/2026): o reforço combinado com o mentor não pode
   parecer meta que o motor inventou. Discreto de propósito — é um carimbo, não
   um alarme. */
.mm-fixa{
  display:inline-block; padding:1px 6px; border-radius:999px;
  background:color-mix(in srgb, var(--brand) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  color:var(--brand); font-weight:700; font-size:11px; letter-spacing:.02em;
  vertical-align:baseline; white-space:nowrap;
}

/* A CANETA DO ALUNO (26/08/2026): depois de responder ele pode marcar e
   desmarcar alternativas em cima da correção, sem mexer no que foi registrado. */
.alt.marcado{outline:2px dashed var(--brand);outline-offset:2px;position:relative}
.alt.marcado::after{content:"🖍";position:absolute;right:8px;top:6px;font-size:12px;opacity:.85}

/* ZAP IA MAIS LARGO (04/09/2026, "layout apertado, nome em cima de nome"): a coluna de
   conteúdo tem 760px para o resto do app; a caixa de entrada do WhatsApp precisa de mais.
   Quando a aba Zap IA está na tela, o main abre até 1500px; e há o modo tela cheia. */
main:has(#pn-zapia .zap-wrap) { max-width: 1500px; }
.zap-wrap { container-type: inline-size; container-name: zap; }
.zap-wrap .zap-head { flex-wrap: wrap; row-gap: 6px; }
@container zap (max-width: 980px) {
  .zap-wrap .zap-ia-aqui { flex: 1 1 100%; justify-content: flex-end; }
}
.zap-wrap.zap-cheio { position: fixed; inset: 0; z-index: 9000; border-radius: 0; border: none; min-height: 0; height: 100dvh; grid-template-columns: 380px 1fr; }
.zap-wrap.zap-cheio .zap-lista, .zap-wrap.zap-cheio .zap-thread { max-height: none; height: 100dvh; }
.zap-wrap.zap-cheio .zap-msgs { padding-left: 8%; padding-right: 8%; }
@media (max-width: 760px) { .zap-wrap.zap-cheio { grid-template-columns: 1fr; } .zap-wrap.zap-cheio .zap-thread { height: 100dvh; } }

/* TABELA DA LEITURA DINÂMICA (06/09/2026): tabela-verdade e quadros das apostilas viram <table> */
.pdf-tabwrap { overflow-x: auto; margin: 14px 0; }
/* 15/09/2026 (dono, print da tabela cortada em A+): a célula não pode ser nowrap — o texto QUEBRA
   dentro da coluna e a tabela ocupa a largura da leitura; rolagem lateral só se ainda assim não couber. */
.pdf-tab { border-collapse: collapse; font: inherit; font-size: .95em; width: 100%; table-layout: auto; }
.pdf-tab th, .pdf-tab td { border: 1px solid rgba(128,128,128,.45); padding: 6px 10px; text-align: center; white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: manual; vertical-align: top; line-height: 1.35; }
/* 27/09/2026 (dono, print do ECA: "8º" e "8º-A" quebrando letra por letra): overflow-wrap:anywhere deixava a largura
   mínima de toda coluna em 1 letra, e a coluna curta (nº do artigo) era espremida pelas de texto longo. Agora a
   palavra só quebra se não couber na linha inteira; a coluna curta fica com a largura da sua maior palavra. */
.pdf-tab td:first-child { font-weight: 600; }
.pdfq-slot[hidden] { display: none; }
.pdfq-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 18px; }
.pdfq-nav .btn { width: auto; min-width: 110px; }
.pdfq-nav .sub { margin: 0; white-space: nowrap; }
.pdf-exemplo { margin: 8px 0 14px; padding: 10px 14px; border-left: 4px solid var(--brand, #FFB001); background: rgba(255,176,1,.10); border-radius: 0 10px 10px 0; font-size: .96em; line-height: 1.5; }
.pdf-read.tema-claro .pdf-exemplo, .pdf-read.tema-sepia .pdf-exemplo { background: rgba(200,140,0,.10); }
/* caixa dentro de item com marcador (25/09/2026, dono: "a luz tá em cima da linha"): o recuo negativo do item
   (.pdf-li, text-indent -1.05em) passava para a caixa e jogava o 💡 em cima da barra laranja */
.pdf-read .pdf-par .pdf-exemplo, .pdf-read .pdf-par .pdf-nota-box { text-indent: 0; }
.pdf-tab th { font-weight: 700; background: rgba(128,128,128,.12); }
.pdf-tab td:first-child, .pdf-tab th:first-child { text-align: left; }
.pdf-tab td.pdf-tab-longa { text-align: left; }
.pdf-tab td { white-space: pre-line; }

/* CARD ESTUDO DE HOJE / SEMANA (06/09/2026) — mesma cara dos quatro números do painel */
.dash .ceh { grid-column: 1 / -1; margin: 0; }
.ceh { margin: 12px 0 14px; padding: 16px 16px 14px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--border); }
.mss-hero .ceh { margin: 14px 0 0; padding: 12px 12px 10px; }
.ceh-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand, #FFB001); margin-bottom: 10px; }
.ceh-cab small { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: 12px; }
.ceh-sem { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ceh-dias + .ceh-cab { margin-top: 14px; }
.ceh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ceh-kpi { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 13px 15px; border-radius: 14px; background: var(--bg, rgba(128,128,128,.06)); border: 1px solid var(--border); }
.ceh-kpi > div { min-width: 0; }
.ceh-kpi b { display: block; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ceh-kpi .ceh-de { font-size: 13px; font-weight: 700; color: var(--muted); }
.ceh-kpi small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; line-height: 1.25; }
.ceh-kpi small em { font-style: normal; color: #d0553a; font-weight: 700; }
.ceh-bar { height: 5px; border-radius: 4px; background: rgba(128,128,128,.22); margin-top: 7px; overflow: hidden; max-width: 150px; }
.ceh-bar i { display: block; height: 100%; background: var(--brand, #FFB001); border-radius: 4px; }
.ceh-dias { display: flex; gap: 6px; justify-content: space-between; margin-top: 12px; height: 40px; align-items: flex-end; }
.ceh-dia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.ceh-dia i { display: block; width: 100%; max-width: 30px; border-radius: 4px 4px 2px 2px; background: rgba(128,128,128,.3); }
.ceh-dia.ok i { background: var(--brand, #FFB001); }
.ceh-dia.hoje b { color: var(--brand, #FFB001); }
.ceh-dia b { font-size: 10px; color: var(--muted); }
@media (max-width: 640px) { .ceh-grid { grid-template-columns: repeat(2, 1fr); } .ceh-kpi { padding: 11px 12px; } .ceh-kpi b { font-size: 18px; } }

/* 07/09/2026: o texto de apoio na revisão também em parágrafos, com o grifo da banca */
.suporte-rev p { margin: 0 0 8px; line-height: 1.6; }
.suporte-rev p:last-child { margin-bottom: 0; }

/* ── MODO FOCO DA QUESTÃO (07/09/2026) ──────────────────────────────────────
   Ordem do dono: "deixa um modo tela cheia para o aluno focar só na questão".
   Some menu, barra inferior, chip do cronômetro e tudo o que não for a questão;
   o cartão ganha a largura da tela e um respiro maior de leitura. */
.q-foco-btn {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text-2); width: 34px; height: 34px; border-radius: 9px;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.q-foco-btn:hover { color: var(--text); border-color: var(--brand); }
body.q-foco .sidebar,
body.q-foco .navbar,
body.q-foco .tabbar,
body.q-foco .bottom-nav,
body.q-foco .bottomnav,
body.q-foco #crono-fab:not(.vivo),
body.q-foco .topbar,
body.q-foco header.app-top { display: none !important; }
body.q-foco .main, body.q-foco main, body.q-foco .conteudo {
  margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important;
}
body.q-foco #view { max-width: 900px; margin: 0 auto; padding: 18px 18px 90px; }
body.q-foco .enunciado { font-size: 20px; line-height: 1.78; }
body.q-foco .alt { font-size: 17px; padding: 16px 17px; }
body.q-foco .suporte { font-size: 16.5px; }
@media (max-width: 720px) { body.q-foco #view { padding: 12px 12px 90px; } }

/* a banca imprime essas palavras em negrito; o app faz o mesmo (07/09/2026) */
.q-forte { font-weight: 800; }
.enunciado br + br { line-height: 0.6; }

/* ── GRIFO NA QUESTÃO (07/09/2026, sugestão de aluno pelo dono: "consegue
   grifar o enunciado… deixa fluida, igual é na teoria"). Mesmas cores e mesmo
   gesto do leitor da Teoria: seleciona o trecho e toca em Grifar. */
.qg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.qg-bar:empty { display: none; }
.qg-bt {
  appearance: none; border: 1px solid var(--border); background: var(--bg-2);
  color: var(--text); border-radius: 999px; padding: 7px 13px;
  font: 600 12.5px/1 inherit; cursor: pointer; min-height: 34px;
  transition: border-color .16s cubic-bezier(.25,1,.5,1), background .16s cubic-bezier(.25,1,.5,1);
}
.qg-bt:hover { border-color: var(--brand); }
/* grifo LIGADO: o botão fica aceso enquanto o modo dura (09/09/2026) — sem
   isso o aluno não sabe se está grifando ou só selecionando */
.qg-bt.on {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-color: var(--brand);
  color: var(--text);
  font-weight: 700;
}
.qg-bt:active { background: var(--bg-3); }
.qg-lim { opacity: .8; }
.qg-cores { display: inline-flex; gap: 6px; align-items: center; }
.qg-cor {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border) inset; cursor: pointer; padding: 0;
  transition: transform .16s cubic-bezier(.25,1,.5,1), border-color .16s cubic-bezier(.25,1,.5,1);
}
.qg-cor:hover { transform: scale(1.12); }
.qg-cor.on { border-color: var(--brand); transform: scale(1.12); }
/* o grifo em si: fundo colorido com texto sempre legível (as 5 cores são claras) */
mark.q-grifo {
  background: #FFE14D; color: #16181d; border-radius: 3px;
  padding: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  cursor: pointer;
}
/* o texto de apoio e o enunciado precisam ser selecionáveis para poder grifar */
#q-suporte, #q-enunciado { user-select: text; -webkit-user-select: text; }
@media (prefers-reduced-motion: reduce) {
  .qg-bt, .qg-cor { transition: none; }
}

/* ── ATALHOS E "VER SOMENTE ANOTAÇÕES" NO LEITOR (08/09/2026) ─────────────
   A dica dos atalhos é discreta de propósito: quem usa mouse/teclado lê uma vez
   e não precisa dela de novo. Some no celular, onde não há teclado. */
.pdf-atalhos {
  align-self: center; font-size: 11px; color: var(--muted); opacity: .75;
  letter-spacing: .01em; white-space: nowrap;
}
.pdf-atalhos b { color: var(--text-2); font-weight: 700; }
@media (hover: none), (max-width: 860px) { .pdf-atalhos { display: none; } }

/* A APOSTILA DO ALUNO — dentro do leitor, com a mesma cara da leitura dinâmica
   (08/09/2026). Ela herda .pdf-read e o tema, então tipografia e rolagem são as do
   material. AS CORES PRECISAM VIR DO TEMA: o leitor só pinta .pdf-par, e na
   primeira versão o título e o "pág. N" herdavam a cor do tema escuro — sumiam no
   sépia e no claro ("não dá nem pra ver direito"). Por isso o bloco de tokens. */
.pdf-read.tema-escuro { --apo-tx: #e7e0d0; --apo-forte: #fff;    --apo-fraco: rgba(231,224,208,.58); --apo-linha: rgba(255,255,255,.12); }
.pdf-read.tema-sepia  { --apo-tx: #4a4234; --apo-forte: #2a2113; --apo-fraco: rgba(74,66,52,.80);    --apo-linha: rgba(90,70,30,.20); }
.pdf-read.tema-claro  { --apo-tx: #33312c; --apo-forte: #14120e; --apo-fraco: rgba(51,49,44,.62);    --apo-linha: rgba(0,0,0,.11); }

.apo-doc { padding-bottom: 48px; color: var(--apo-tx); }
.apo-titulo { margin: 4px 0 8px; }
.apo-titulo b {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em;
  color: var(--brand); margin-bottom: 6px;
}
.apo-titulo h2 {
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25; font-weight: 700;
  color: var(--apo-forte); margin: 0 0 6px; text-wrap: balance;
}
.apo-titulo small { display: block; font-size: 12.5px; color: var(--apo-fraco); }
.apo-titulo::after {
  content: ""; display: block; height: 2px; width: 64px;
  background: var(--brand); border-radius: 2px; margin-top: 14px;
}
/* a página vira um separador, e só aparece quando muda */
.apo-pag {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 12px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--apo-fraco);
}
.apo-pag::after { content: ""; flex: 1; height: 1px; background: var(--apo-linha); }
.apo-doc > .apo-pag:first-of-type { margin-top: 20px; }
/* cada trecho com um filete lateral, em vez de linha cheia entre eles */
.apo-item {
  border-left: 2px solid var(--apo-linha); padding: 2px 0 2px 16px; margin: 0 0 16px;
}
.apo-item .pdf-par { margin: 0; color: var(--apo-tx); }
.apo-item .pdf-par.pdf-head { font-size: 17px; font-weight: 700; color: var(--apo-forte); }
.apo-item mark { border-radius: 3px; padding: 0 1px; color: #16181d; }
.apo-nota {
  background: rgba(255,176,1,.12); border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0; padding: 9px 13px; font-style: italic;
  font-size: 14px; line-height: 1.6; margin-top: 12px; color: var(--apo-tx);
}
.apo-nopdf { font-size: 13.5px; color: var(--apo-fraco); margin: 0; }
.apo-vazio { text-align: center; padding: 52px 10px; color: var(--apo-tx); }
.apo-vazio b { display: block; font-size: 16.5px; color: var(--apo-forte); margin-bottom: 8px; }
.apo-vazio span { font-size: 14px; color: var(--apo-fraco); line-height: 1.6; }
.apo-fim {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--apo-linha);
}

/* ============================================================
   CADERNO — PÁGINA EDITÁVEL (08/09/2026, ordem do dono: "precisa ser igual a
   uma página do Notion... como está é muito mal formatado, muito quadrado").
   A régua aqui é a mesma da leitura dinâmica: coluna estreita, respiro entre as
   linhas e nada de caixa dentro de caixa. O que aparece na tela é o texto.
   ============================================================ */
.nb-topo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.nb-voltar {
  background: none; border: 0; color: var(--text-2); font: inherit; font-size: 14px;
  cursor: pointer; padding: 4px 2px;
}
.nb-voltar:hover { color: var(--brand); }
.nb-topo-acoes { margin-left: auto; display: flex; gap: 6px; }
.nb-estado { font-size: 12px; color: var(--muted); }
.nb-estado.ok { color: var(--green); }
.nb-estado.erro { color: var(--red); }

.nb-barra {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 6px 4px; margin-bottom: 6px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.nb-bt, .nb-barra .nb-cor {
  min-width: 30px; height: 30px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  /* --text (cheia), não --text-2: botão de comando tem que ser lido de relance */
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer;
}
.nb-bt:focus-visible, .nb-bolha button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nb-bt:hover { background: var(--bg-3); color: var(--text); }
.nb-bt.on { color: var(--brand); border-color: var(--brand); }
.nb-bt-perigo:hover { color: var(--red); }
.nb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.nb-cor { width: 22px; min-width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); padding: 0; cursor: pointer; }
.nb-cor-off { background: transparent !important; border: 1px dashed var(--border); color: var(--muted); font-size: 12px; }

.nb-folha { max-width: 760px; margin: 0 auto; padding: 4px 2px 60px; }
.nb-titulo {
  width: 100%; border: 0; background: transparent; color: var(--text);
  font-family: var(--serif, Georgia, serif); font-size: 30px; font-weight: 800; line-height: 1.25;
  padding: 6px 0 2px; outline: none;
}
.nb-titulo::placeholder { color: var(--muted); opacity: .55; }
.nb-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; }
.nb-meta-in {
  flex: 1 1 140px; min-width: 120px; border: 0; border-bottom: 1px dashed var(--border);
  background: transparent; color: var(--text-2); font: inherit; font-size: 13px; padding: 3px 0; outline: none;
}
.nb-meta-in:focus { border-bottom-color: var(--brand); color: var(--text); }

.nb-corpo {
  outline: none; color: var(--text);
  font-size: 17px; line-height: 1.75; min-height: 55vh;
  caret-color: var(--brand); word-break: break-word;
}
/* o texto-guia é marcado por JS (.nb-vazio): :empty não serve, porque o
   navegador mantém um <p><br></p> dentro de todo contenteditable */
.nb-corpo { position: relative; }
.nb-corpo.nb-vazio::before {
  content: attr(data-vazio); position: absolute; left: 0; top: 0;
  color: var(--muted); opacity: .55; pointer-events: none;
}
.nb-corpo > * { margin: 0 0 12px; }
.nb-corpo h1 { font-family: var(--serif, Georgia, serif); font-size: 25px; font-weight: 800; margin: 22px 0 8px; line-height: 1.3; }
.nb-corpo h2 { font-family: var(--serif, Georgia, serif); font-size: 21px; font-weight: 800; margin: 20px 0 6px; line-height: 1.32; }
.nb-corpo h3 { font-size: 17.5px; font-weight: 700; margin: 16px 0 4px; color: var(--brand); letter-spacing: .01em; }
.nb-corpo ul, .nb-corpo ol { padding-left: 24px; }
.nb-corpo li { margin: 3px 0; }
.nb-corpo blockquote {
  border-left: 3px solid var(--brand); margin: 12px 0; padding: 2px 0 2px 14px;
  color: var(--text-2); font-style: italic;
}
.nb-corpo pre {
  background: var(--bg-3); border-radius: 8px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  white-space: pre-wrap; overflow-x: auto;
}
.nb-corpo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.nb-corpo hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.nb-corpo a { color: var(--brand); text-decoration: underline; }
.nb-corpo mark { border-radius: 3px; padding: 1px 0; color: inherit; }
.nb-corpo img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 10px auto; }
.nb-corpo figure { margin: 12px 0; }
.nb-corpo table, .nb-corpo .nb-tab {
  border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px;
  table-layout: fixed;   /* as colunas dividem a largura por igual e não mudam enquanto o aluno digita (10/09/2026) */
}
.nb-corpo td, .nb-corpo th { min-width: 40px; overflow-wrap: anywhere; }
.nb-corpo th, .nb-corpo td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.nb-corpo th { background: var(--bg-3); font-weight: 700; }
.nb-corpo .nb-call {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-left: 3px solid var(--brand); border-radius: 8px; padding: 10px 14px;
}
.nb-corpo .nb-origem { font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 10px; }
/* tarefa: a caixa é desenhada, não é <input> (input dentro de contenteditable
   briga com o cursor no Android) */
.nb-corpo ul.nb-todo { list-style: none; padding-left: 6px; }
.nb-corpo ul.nb-todo li { position: relative; padding-left: 26px; }
.nb-corpo ul.nb-todo li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 4px; cursor: pointer;
}
.nb-corpo ul.nb-todo li[data-check="1"]::before {
  content: "✓"; color: #1A1611; background: var(--brand); border-color: var(--brand);
  font-size: 12px; line-height: 15px; text-align: center; font-weight: 900;
}
.nb-corpo ul.nb-todo li[data-check="1"] { color: var(--muted); text-decoration: line-through; }
.nb-dica { margin-top: 22px; font-size: 12px; color: var(--muted); }

/* barra flutuante do trecho selecionado */
.nb-bolha {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 3px;
  padding: 5px 7px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--border); box-shadow: var(--shadow);
}
/* O `hidden` do HTML vale por `[hidden]{display:none}` da folha do NAVEGADOR —
   e `display:flex` numa classe ganha dessa regra. Ou seja: a bolha nunca ficou
   escondida de verdade; ela nascia visível e ficava pendurada na tela, e todo o
   `bo.hidden = true` do JS não surtia efeito nenhum. Foi o que o dono viu como
   "essa barra não saiu mais". (08/09/2026) */
.nb-bolha[hidden], .nb-slash[hidden] { display: none !important; }
.nb-bolha button {
  min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.nb-bolha button:hover { background: var(--bg-3); color: var(--text); }
.nb-bolha button.on { color: var(--brand); }
.nb-bolha .nb-cor { width: 20px; min-width: 20px; height: 20px; }

/* menu do "/" */
.nb-slash {
  position: fixed; z-index: 60; width: 268px; max-height: 300px; overflow: auto;
  padding: 6px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.nb-op {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 7px 9px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; cursor: pointer;
}
.nb-op:hover, .nb-op.sel { background: var(--bg-3); }
.nb-op-ico {
  width: 28px; min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; color: var(--brand);
}
.nb-op-txt { display: flex; flex-direction: column; line-height: 1.2; }
.nb-op-txt b { font-size: 14px; font-weight: 600; }
.nb-op-txt small { font-size: 11.5px; color: var(--muted); }

/* cartão da página na lista do caderno */
.cad-pag { cursor: pointer; position: relative; padding-right: 74px; }
.cad-pag:hover { border-color: var(--brand); }
.cad-pag-previa { display: block; color: var(--text-2); font-size: 13px; }
.cad-pag-ir { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--brand); }

@media (max-width: 560px) {
  .nb-titulo { font-size: 25px; }
  .nb-corpo { font-size: 16.5px; }
  .nb-barra { gap: 2px; padding: 5px 2px; }
  .nb-bt { min-width: 28px; height: 28px; padding: 0 5px; font-size: 13px; }
}

/* ============================================================
   MINHAS ANOTAÇÕES — a folha do material virou o mesmo editor do Caderno
   (08/09/2026). O material e o PDF continuam SÓ LEITURA, como o dono deixou
   claro; o que o aluno edita é a folha dele: pode escrever, apagar, grifar,
   marcar, pôr imagem. Aqui só o casamento visual: o editor herda o tema do
   leitor (escuro / sépia / claro) em vez das cores do app.
   ============================================================ */
/* CONTRASTE (08/09/2026, relato do dono: "ficou muito transparente, não dá pra
   ver, parecendo que estava bugado"). Os botões herdavam --apo-fraco, que é uma
   cor TRANSLÚCIDA feita para legenda, não para comando. Agora a barra é uma
   superfície de verdade, com o ícone na cor cheia do texto do tema. */
:is(#pdf-apostila, .nb-leitura) .nb-barra {
  background: rgba(128, 128, 128, .09);
  border: 1px solid var(--apo-linha); border-radius: 10px;
  margin: 6px 0 16px; padding: 6px 8px;
}
/* barra fixa (sticky) com fundo translúcido deixa o texto passar POR BAIXO e
   vira borrão. Cada tema do leitor dá a ela o próprio fundo, opaco. */
:is(#pdf-apostila, .nb-leitura).tema-escuro .nb-barra { background: #14120e; }
:is(#pdf-apostila, .nb-leitura).tema-sepia  .nb-barra { background: #f3ead6; }
:is(#pdf-apostila, .nb-leitura).tema-claro  .nb-barra { background: #fbfaf7; }
:is(#pdf-apostila, .nb-leitura) .nb-bt {
  color: var(--apo-tx); font-weight: 600; opacity: 1;
  border-radius: 8px;
}
:is(#pdf-apostila, .nb-leitura) .nb-bt:hover { background: rgba(128, 128, 128, .2); color: var(--apo-forte); }
:is(#pdf-apostila, .nb-leitura) .nb-bt:active { background: rgba(128, 128, 128, .3); }
:is(#pdf-apostila, .nb-leitura) .nb-bt:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
:is(#pdf-apostila, .nb-leitura) .nb-sep { background: var(--apo-linha); }
/* as bolinhas de cor precisam de borda: as claras somem no fundo claro */
:is(#pdf-apostila, .nb-leitura) .nb-barra .nb-cor { border: 1px solid rgba(0, 0, 0, .32); }
:is(#pdf-apostila, .nb-leitura) .nb-barra .nb-cor-off { border-style: dashed; color: var(--apo-tx); }
.nb-corpo.apo-corpo {
  color: var(--apo-tx); min-height: 42vh; line-height: 1.75;
  /* a MESMA régua do texto do material: o A−/A+ do leitor alcança a folha (10/09/2026) */
  font-size: clamp(14.5px, calc(var(--pdf-fs, 18px) * .74 + 0.9vw), var(--pdf-fs, 18px));
}
:is(#pdf-apostila, .nb-leitura) .nb-corpo table { font-size: inherit; }
/* a barra fixa gruda no topo DE VERDADE: o padding do leitor ficava acima dela e o texto
   passava por cima (print do dono, 10/09/2026) */
:is(#pdf-apostila, .nb-leitura) { padding-top: 0 !important; }
:is(#pdf-apostila, .nb-leitura) > .pdf-pagina.apo-doc { padding-top: 26px; }
/* folha aberta: as ferramentas do leitor saem de cena; fica só "Voltar à leitura" */
body.apostila-aberta .pdf-tools > *:not(#pdf-so-marcado) { display: none !important; }
.nb-corpo.apo-corpo h1, .nb-corpo.apo-corpo h2 { color: var(--apo-forte); }
.nb-corpo.apo-corpo h3 { color: var(--apo-forte); }
.nb-corpo.apo-corpo blockquote { border-left-color: var(--apo-linha); color: var(--apo-fraco); }
.nb-corpo.apo-corpo th, .nb-corpo.apo-corpo td { border-color: var(--apo-linha); }
.nb-corpo.apo-corpo th { background: rgba(128,128,128,.12); }
.nb-corpo.apo-corpo pre { background: rgba(128,128,128,.12); }
.nb-corpo.apo-corpo hr { border-top-color: var(--apo-linha); }
.nb-corpo.apo-corpo mark { color: #16181d; }
.nb-corpo.apo-corpo .nb-origem { color: var(--apo-fraco); border-bottom-color: var(--apo-linha); }
.nb-corpo.apo-corpo ul.nb-todo li::before { border-color: var(--apo-fraco); }
:is(#pdf-apostila, .nb-leitura) .apo-titulo small .nb-estado { display: inline; }
/* dentro do leitor vale a paleta do MATERIAL: --muted/--green/--red foram
   calibrados para o fundo do app e somem no sépia e no claro */
:is(#pdf-apostila, .nb-leitura) .nb-estado { color: var(--apo-fraco); }
:is(#pdf-apostila, .nb-leitura) .nb-estado.ok { color: #2f7d52; }
:is(#pdf-apostila, .nb-leitura) .nb-estado.erro { color: #b3261e; }

/* foto de perfil no cartão do QG (08/09/2026) */
.dash-ola { position: relative; }
.dash-foto {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto 10px; border: 2px solid var(--brand);
  background: var(--bg-3); cursor: pointer;
}
.dash-foto-vazia {
  font-size: 20px; color: var(--muted); border-style: dashed; border-color: var(--border);
  display: grid; place-items: center; padding: 0;
}
.dash-foto-vazia:hover { border-color: var(--brand); color: var(--brand); }

/* ---- ENQUADRAR A FOTO DE PERFIL (08/09/2026) ----
   O círculo mostra exatamente o que vai virar a foto; o resto fica escurecido. */
.foto-palco {
  position: relative; width: 300px; max-width: 100%; aspect-ratio: 1 / 1;
  margin: 0 auto; border-radius: 12px; overflow: hidden; touch-action: none;
  cursor: grab; background: var(--bg-3); user-select: none;
}
.foto-palco:active { cursor: grabbing; }
.foto-palco canvas { display: block; width: 100%; height: 100%; }
.foto-mascara {
  position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  box-shadow: inset 0 0 0 9999px rgba(10, 8, 5, .62);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 49%, #000 49.5%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 49%, #000 49.5%);
}
.foto-mascara::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--brand); opacity: .85;
}
.foto-zoom { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.foto-zoom input[type="range"] { flex: 1; accent-color: var(--brand); }
.foto-zbt {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg-3); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer;
}
.foto-zbt:hover { border-color: var(--brand); color: var(--brand); }

/* o menu do "/" dentro da folha do material herda a paleta do leitor */
:is(#pdf-apostila, .nb-leitura) ~ .nb-slash, .nb-slash { color: var(--text); }
.nb-cor { border: 1px solid rgba(0, 0, 0, .32); }
.nb-cor-off { border-style: dashed; }

/* ---- marcação PRÓPRIA do caderno (08/09/2026) ----
   O que vem do material é normalizado para estas classes, que funcionam tanto no
   tema do app (Caderno) quanto no tema do leitor (folha do material). Sem elas,
   o texto do material entrava no Caderno com as variáveis do leitor — que lá não
   existem — e saía ilegível, um bloco por cima do outro. */
.nb-corpo .nb-trecho {
  border-left: 2px solid currentColor; padding: 2px 0 2px 14px; margin: 0 0 16px;
  border-left-color: color-mix(in srgb, currentColor 26%, transparent);
}
.nb-corpo .nb-trecho > p { margin: 0 0 8px; }
.nb-corpo .nb-trecho > p:last-child { margin-bottom: 0; }
.nb-corpo .nb-pag {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .6; margin: 22px 0 8px;
}
.nb-corpo .nb-nota {
  border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  padding: 9px 13px; font-style: italic; font-size: .94em; margin: 10px 0;
}
.nb-corpo .nb-fig { margin: 12px 0; text-align: center; }
.nb-corpo .nb-fig img { max-width: 100%; height: auto; border-radius: 8px; }
/* o grifo herdado do material fica legível nos dois temas */
.nb-corpo mark { color: #16181d; }
/* o grifo FEITO aqui sai do execCommand como <span style="background-color:…">,
   não como <mark>: sem esta regra o texto continuava na cor clara do tema e
   sumia dentro da própria cor do grifo. */
.nb-corpo span[style*="background-color"] { color: #16181d; }
.nb-corpo span[style*="background-color: transparent"] { color: inherit; }

/* ============================================================
   CADERNO COM A CARA DA FOLHA DO LEITOR (10/09/2026)
   A página do Caderno entra na mesma moldura de papel da folha
   "Ver somente anotações": temas escuro/sépia/claro, A−/A+ e a
   mesma barra. Rola com a tela do app (overflow visível), a barra
   fixa continua colando no topo.
   ============================================================ */
.nb-viewbar { border-radius: 12px; margin: 6px 0 10px; }
.nb-leitura { overflow: visible; flex: none; border-radius: 14px; margin: 0 0 40px; min-height: 60vh; }
.nb-leitura .nb-cabecalho .nb-titulo { color: var(--apo-forte); padding-top: 0; font-size: clamp(22px, 2.4vw, 30px); }
.nb-leitura .nb-cabecalho .nb-titulo::placeholder { color: var(--apo-fraco); opacity: .9; }
.nb-leitura .nb-meta { margin: 0 0 4px; }
.nb-leitura .nb-meta-in { color: var(--apo-tx); border-bottom-color: var(--apo-linha); }
.nb-leitura .nb-meta-in::placeholder { color: var(--apo-fraco); }
.nb-leitura .nb-meta-in:focus { color: var(--apo-forte); border-bottom-color: var(--brand); }
.nb-leitura .nb-dica { color: var(--apo-fraco); }
.nb-leitura .nb-corpo.apo-corpo { min-height: 55vh; }
/* texto escuro sobre o grifo, em qualquer tema (o grifo agora é span com fundo inline) */
.nb-corpo span[style*="background-color"]:not([style*="transparent"]) { color: #16181d; border-radius: 2px; }

/* ============================================================
   CADERNO EM TELA CHEIA (10/09/2026, dono: "tem que ser tela toda igual
   o outro"). Enquanto uma página está aberta, o app some (menu, barras) e
   a tela vira a do leitor: barra de cima, barra de tema e o papel rolando
   por dentro, com a barra de ferramentas colada no topo do papel.
   ============================================================ */
body.caderno-tela .sidebar, body.caderno-tela .navbar, body.caderno-tela .tabbar,
body.caderno-tela .bottom-nav, body.caderno-tela .bottomnav, body.caderno-tela .topbar,
body.caderno-tela header.app-top { display: none !important; }
body.caderno-tela .main, body.caderno-tela main, body.caderno-tela .conteudo {
  margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; overflow: hidden !important;
}
body.caderno-tela #view {
  max-width: none; margin: 0; padding: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; overflow: hidden; background: #11100c;
}
body.caderno-tela .nb-top { flex: none; }
body.caderno-tela .nb-top .pdf-tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.caderno-tela .nb-top .nb-estado { color: #cdbf9f; white-space: nowrap; }
body.caderno-tela .nb-top .nb-estado.ok { color: #7fd39a; }
body.caderno-tela .nb-top .nb-estado.erro { color: #f08672; }
body.caderno-tela .nb-viewbar { flex: none; border-radius: 0; margin: 0; }
body.caderno-tela .nb-leitura { flex: 1 1 auto; min-height: 0; overflow: auto; border-radius: 0; margin: 0; }
/* cor do texto: a letra na própria cor, sublinhada pela cor */
.nb-txtcor { font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.nb-txtcor-off { text-decoration: none; border: 1px dashed var(--border) !important; }

/* "Voltar à leitura" na barra de tema só existe com a folha aberta: a classe .pvb-grp
   (display: inline-flex) vencia o atributo hidden e o botão ficava na leitura normal
   (print do dono, 10/09/2026 11:20) */
#pvb-voltar[hidden] { display: none !important; }

/* OFFLINE (11/09/2026): materiais guardados no aparelho */
.pdf-top-btn.pdf-off.on{border-color:#42c48a;color:#42c48a}
.off-cota .off-num{font-size:24px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.off-barra{height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden;margin-top:10px}
.off-barra b{display:block;height:100%;background:var(--brand)}
.off-lista{display:grid;gap:6px;margin-top:8px}
.off-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;background:var(--bg-2);border:1px solid var(--border)}
.off-abrir{flex:1;min-width:0;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:8px 4px;min-height:44px}
.off-abrir b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.off-abrir small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.off-rm{font-size:12.5px;color:var(--muted);min-height:44px;padding:0 8px}

/* MARCADA COM DÚVIDA (14/09/2026): a alternativa arriscada, o botão, o cartão e a lista do resultado */
.alt.sel.duvida { border-style: dashed; border-color: #ff9f1c; background: rgba(255,159,28,.10); }
.alt.sel.duvida .letra::after { content: "?"; margin-left: 4px; font-weight: 900; color: #ff9f1c; }
.btn-duvida.on { border-color: #ff9f1c; color: #ff9f1c; background: rgba(255,159,28,.10); }
.cr-num.duv { border-color: #ff9f1c; border-style: dashed; position: relative; }
.cr-num.duv::after { content: "?"; position: absolute; top: -6px; right: -4px; font-size: 10px; font-weight: 900; color: #ff9f1c; background: var(--bg-2, #15130f); border-radius: 8px; padding: 0 3px; }
.rev-duvida { font-size: 11px; font-weight: 700; color: #ff9f1c; margin-left: 6px; white-space: nowrap; }

/* filtros da revisão do resultado (14/09/2026) */
.rev-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rev-filtros .q-marca small { opacity: .75; font-weight: 600; margin-left: 2px; }

/* ── Tropa online (Comunidade, 17/09/2026) ── */
.tropa-card { margin-bottom: 14px; }
.tropa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.tropa-cfg { display: flex; gap: 10px; flex-wrap: wrap; }
.tropa-cfg .btn-ghost { font-size: 12px; color: var(--muted); padding: 2px 4px; }
.tropa-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.tropa-item:first-of-type { border-top: 0; }
.tropa-item.eu { background: rgba(255,176,1,.05); margin: 0 -6px; padding: 10px 6px; border-radius: 10px; }
.tropa-av { width: 40px; height: 40px; font-size: 16px; }
.tropa-av-g { width: 56px; height: 56px; font-size: 22px; }
.tropa-meio { flex: 1; min-width: 0; }
.tropa-nome { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tropa-nome small { color: var(--muted); }
.tropa-st { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--bg-3); color: var(--text-2); }
.tropa-st.online { color: var(--green); }
.tropa-st.estudando { color: #1A1611; background: var(--brand); font-weight: 700; }
.tropa-stats { font-size: 12px; color: var(--text-2); margin: 3px 0 6px; }
.tropa-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.tropa-acoes .com-btn { min-height: 30px; font-size: 12px; padding: 4px 9px; }
.tropa-ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tropa-ficha > div { background: var(--bg-3); border-radius: 10px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.tropa-ficha b { font-size: 18px; color: var(--brand); }
.tropa-ficha span { font-size: 11px; color: var(--muted); }
.tropa-pop-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tropa-pop-item > div { flex: 1; }
.tropa-pop-emoji { font-size: 22px; }

/* ---------- CHAT DA TROPA (18/09/2026) ---------- */
/* 05/10/2026 (dono: "a aba comunidade... aparecendo só uma parte, cortado"): as 4 abas da tropa quebram linha em vez de sumir à direita; chat mais alto */
.tropa-abas { flex-wrap: wrap; overflow-x: visible; }
.tchat { display: flex; flex-direction: column; }
.tchat-msgs { max-height: min(62vh, 560px); min-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; overscroll-behavior: contain; }
.tchat-msg { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 6px 30px 6px 8px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 13.5px; }
.tchat-msg.dono { border-color: var(--brand); background: rgba(255, 176, 1, .07); }
.tchat-msg.meu .tchat-nome b { color: #6ea8fe; }
.tchat-av { width: 30px; height: 30px; min-width: 30px; font-size: 11px; margin-top: 1px; }
.tchat-corpo { min-width: 0; flex: 1; }
.tchat-nome { font-size: 11.5px; font-weight: 800; color: var(--brand); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tchat-nome time { font-weight: 600; color: var(--muted); font-size: 10.5px; }
.tchat-txt { line-height: 1.45; word-break: break-word; white-space: pre-line; }
.tchat-x { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; }
.tchat-x:hover { color: #e5484d; }
.tchat-form { display: flex; gap: 6px; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border); }
.tchat-form .input { flex: 1; min-width: 0; }

/* rótulo de cada aluno na tropa e no chat (18/09/2026) */
.tropa-rotulo { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); vertical-align: middle; margin-left: 4px; white-space: nowrap; }
.tropa-rotulo.mentoria { color: #ffb001; border-color: rgba(255, 176, 1, .55); background: rgba(255, 176, 1, .08); }
.tropa-rotulo.comando { color: #6ea8fe; border-color: rgba(110, 168, 254, .5); background: rgba(110, 168, 254, .08); }
.tropa-rotulo.mike { color: #7ed491; border-color: rgba(126, 212, 145, .5); background: rgba(126, 212, 145, .08); }

/* ---------- 18/09/2026: Caderno = espelho da folha do leitor; chip do cronômetro; imagem arrastável ---------- */
/* a página do Caderno tem a mesma largura da folha "Minhas anotações" do leitor (lá o menu se recolhe: 97vw) */
body.caderno-tela .nb-leitura .pdf-pagina { max-width: 97vw; }
body.caderno-tela .nb-leitura { border-radius: 0; margin: 0; }
/* título editável com a cara do h2 da folha */
.nb-leitura .nb-cabecalho .nb-titulo { font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; line-height: 1.25; margin: 0 0 6px; }
.nb-leitura .nb-cabecalho small a { color: var(--brand); text-decoration: none; font-weight: 700; }
.nb-leitura .nb-cabecalho small a:hover { text-decoration: underline; }
/* o cronômetro não pode sumir na folha de anotações nem na leitura sem menu (o relógio da barra de cima some junto com a barra) */
body.modal-aberto:is(.apostila-aberta, .sem-lateral) #crono-fab { display: flex !important; z-index: 10000; }
/* soltar imagem no editor */
.nb-corpo.nb-solta-aqui { outline: 2px dashed var(--brand); outline-offset: 4px; border-radius: 6px; }
.nb-corpo figure.apo-fig { cursor: grab; }
.nb-corpo figure.apo-fig:active { cursor: grabbing; }
.nb-corpo figure.apo-fig img { pointer-events: auto; }

/* TEXTO PRETO NA FOLHA (18/09/2026, dono: "nas fontes, colocar preto, às vezes vem outra cor"). O corpo do editor
   e os blocos (citação, destaque, lista) herdavam o tom "fraco" do tema (marrom no sépia, cinza no claro); o texto
   escrito pelo aluno passa a usar a cor forte — preto no sépia/claro, branco no escuro. Cor escolhida na barra
   (nb-txtcor) continua valendo, porque vem inline. */
:is(#pdf-apostila, .nb-leitura) .nb-corpo,
:is(#pdf-apostila, .nb-leitura) .nb-corpo :is(p, li, blockquote, h1, h2, h3, h4, td, th, div, span:not([style*="color"])) { color: var(--apo-forte); }
:is(#pdf-apostila, .nb-leitura).tema-sepia .nb-corpo, :is(#pdf-apostila, .nb-leitura).tema-sepia .nb-corpo :is(p, li, blockquote, h1, h2, h3, h4, td, th, div) { color: #111; }
:is(#pdf-apostila, .nb-leitura).tema-claro .nb-corpo, :is(#pdf-apostila, .nb-leitura).tema-claro .nb-corpo :is(p, li, blockquote, h1, h2, h3, h4, td, th, div) { color: #111; }

/* LEÃO DO DIA (23/09/2026) */
.leao-card{display:flex;align-items:center;gap:12px;border-left:5px solid var(--brand);text-align:left;width:100%;cursor:pointer;margin:12px 0}
/* o card de patente não é .card e não tem margem embaixo — o Leão leva margem explícita nos dois sentidos (dono, 23/09: "topando um card no outro") */
.leao-ico{font-size:30px;line-height:1}
.leao-hero{display:flex;align-items:center;gap:12px;margin-top:4px}
.leao-tit{font-weight:800;font-size:16px}
.leao-q{padding:14px}
.leao-num{font-weight:800;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;margin-bottom:8px;color:var(--brand)}
.leao-q .enunciado{margin:6px 0 10px}
.leao-q .alt.certa{border-color:#2ecc71;box-shadow:inset 0 0 0 1px #2ecc71}
.leao-q .alt.errada{border-color:#e74c3c;box-shadow:inset 0 0 0 1px #e74c3c}
.leao-gab{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,176,1,.08);border:1px solid rgba(255,176,1,.35)}
.leao-resultado{text-align:center;border-color:var(--brand)}
.leao-placar b{font-size:56px;color:var(--brand);font-weight:900}
.leao-placar span{font-size:22px;color:var(--muted);font-weight:700}
.pill.red{background:rgba(231,76,60,.15);color:#e74c3c}

/* STATUS DA TROPA — stories (23/09/2026) */
.st-row{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 4px;scrollbar-width:none}
.st-row::-webkit-scrollbar{display:none}
.st-item{flex:0 0 auto;width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;color:var(--text)}
.st-av{position:relative;width:64px;height:64px;border-radius:50%;padding:3px;background:var(--border);display:flex;align-items:center;justify-content:center}
.st-av img,.st-av>span:first-child{width:100%;height:100%;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;background:#e9e2cf;color:#241A05}
.st-item.tem .st-av{background:linear-gradient(135deg,#2ecc71,#27ae60);box-shadow:0 0 0 2px rgba(46,204,113,.25)}
.st-item.online:not(.tem) .st-av{background:rgba(46,204,113,.45)}
.st-mais{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#fff;color:#111;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.st-rot{font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--brand);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:12px}
.st-rot.vazio,.st-pill.vazio{opacity:.55}
.st-pill{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--border);color:var(--text);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-nome{font-size:11px;color:var(--muted);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-view-topo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.st-view-img{width:100%;max-height:70vh;object-fit:contain;border-radius:12px;background:#000}
.st-view-txt{margin-top:8px;font-weight:600;line-height:1.5}

.leao-ico-img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,176,1,.45)}
.h-page .leao-ico-img{width:34px;height:34px}
.st-react{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.st-react-btn{border:1.5px solid var(--border);background:var(--bg);color:var(--text);border-radius:999px;padding:8px 14px;font-size:15px;cursor:pointer}
.st-react-btn.on{border-color:var(--brand);background:rgba(255,176,1,.14)}
.st-react-tot{font-size:14px;font-weight:700}
.st-horas{display:flex;gap:8px;flex-wrap:wrap}
.st-hora{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer}
.st-hora:has(input:checked){border-color:var(--brand);background:rgba(255,176,1,.14)}

/* AJUSTES redesenhada (23/09/2026) — ficha do guerreiro + grupos de linhas. Um elemento forte (a ficha), o resto quieto. */
.aj-page{padding-bottom:8px}
.aj-id{position:relative;display:flex;gap:14px;align-items:center;padding:16px;border-radius:20px;background:linear-gradient(150deg,rgba(255,176,1,.16),rgba(255,176,1,.03) 55%),var(--bg-2);border:1px solid rgba(255,176,1,.35);box-shadow:0 18px 40px -24px rgba(255,176,1,.45);overflow:hidden}
.aj-id::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,176,1,.22),rgba(255,176,1,0));pointer-events:none}
.aj-foto{position:relative;width:74px;height:74px;border-radius:50%;flex-shrink:0;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;color:#241A05;box-shadow:0 0 0 3px var(--bg-2),0 0 0 5px rgba(255,176,1,.6);padding:0}
.aj-foto.st{box-shadow:0 0 0 3px var(--bg-2),0 0 0 5px #2EBD59}
.aj-foto img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.aj-cam{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px}
.aj-id-tx{min-width:0;flex:1;position:relative;z-index:1}
.aj-nome{font-family:"Playfair Display",serif;font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--text);padding:0;display:inline-flex;align-items:center;gap:8px;max-width:100%;text-align:left;line-height:1.15}
.aj-nome-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aj-edit{display:inline-flex;opacity:.55;flex-shrink:0}.aj-edit svg{width:15px;height:15px}
.aj-pat{font-size:12.5px;color:var(--text-2);margin-top:3px;line-height:1.4}
.aj-xp{height:5px;border-radius:99px;background:var(--border);margin-top:8px;overflow:hidden}.aj-xp span{display:block;height:100%;background:var(--grad);border-radius:99px}
.aj-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.aj-pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,176,1,.16);color:var(--brand);border:1px solid rgba(255,176,1,.3);line-height:1.3}
.aj-pill.dim{background:transparent;color:var(--text-2);border-color:var(--border)}
.aj-pill-btn{cursor:pointer}
.aj-h{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin:22px 4px 8px}
.aj-group{background:var(--bg-2);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.aj-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:11px 14px;text-align:left;color:var(--text);background:transparent;border:0;position:relative;margin:0}
.aj-row+.aj-row::before,.aj-row+.aj-slot::before,.aj-slot+.aj-row::before{content:"";position:absolute;left:60px;right:0;top:0;height:1px;background:var(--border);opacity:.75}
button.aj-row:active{background:rgba(255,176,1,.06)}
.aj-ic{width:34px;height:34px;border-radius:11px;background:rgba(255,176,1,.1);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}.aj-ic svg{width:19px;height:19px}
.aj-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.aj-lb{font-size:14.5px;font-weight:600;line-height:1.25}
.aj-sb{font-size:12px;color:var(--text-2);line-height:1.4}
.aj-val{font-size:13px;color:var(--text-2);font-weight:600;max-width:42%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.aj-chev{color:var(--muted);display:flex;flex-shrink:0}
.aj-static .aj-chev{visibility:hidden}.aj-static{cursor:default}
.aj-toggle{cursor:pointer}.aj-toggle .switch{margin-left:auto;display:block}
.aj-red .aj-lb,.aj-red .aj-ic{color:var(--red)}.aj-red .aj-ic{background:rgba(230,57,70,.1)}
.aj-dim .aj-lb{color:var(--text-2)}.aj-dim .aj-ic{background:transparent;color:var(--muted)}
.aj-slot{position:relative}
.aj-slot #st-ajustes{border:0;border-radius:0;background:transparent;padding:12px 14px 14px 60px;margin:0}
#aj-taf-slot .card{margin:0}
.aj-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px;line-height:1.4}.aj-kv:last-child{border-bottom:0}.aj-kv span{color:var(--text-2);flex-shrink:0}.aj-kv b{text-align:right}

/* TAF dentro de Ajustes (23/09/2026, dono: "ainda ficou todo mal formatado"): no iPhone o input de data tem largura
   mínima própria e vazava da grade; aqui todo campo cabe na coluna e o texto alinha à esquerda */
#aj-taf-slot .aj-taf{border-radius:18px;padding:16px}
#aj-taf-slot .taf-perfil-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#aj-taf-slot .taf-perfil-grid .lbl{min-width:0}
#aj-taf-slot .input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;height:48px;text-align:left}
#aj-taf-slot input[type="date"]{display:block;padding-right:10px}
#aj-taf-slot input[type="date"]::-webkit-date-and-time-value{text-align:left}
#aj-taf-slot .taf-dias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#aj-taf-slot .taf-dia{padding:0 6px;font-size:13px}

/* LEÃO AO LADO DO NOME (24/09/2026): quem fez o Leão do Dia hoje */
.leao-mini { width: 17px; height: 17px; object-fit: contain; vertical-align: -3px; margin-left: 5px; filter: drop-shadow(0 0 3px rgba(255,176,1,.45)); }
.st-nome .leao-mini { width: 13px; height: 13px; margin-left: 3px; vertical-align: -2px; }

/* ESTUDANDO AGORA (24/09/2026) — Comunidade */
.estud-box { margin: 12px 0 14px; padding: 12px 12px 6px; border-radius: 14px; background: linear-gradient(180deg, rgba(126,224,138,.08), rgba(126,224,138,.02)); border: 1px solid rgba(126,224,138,.28); }
.estud-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.estud-lista { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.estud-item { display: flex; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; }
.estud-item.eu { background: rgba(255,176,1,.06); }
.estud-av { width: 42px; height: 42px; flex: 0 0 42px; box-shadow: 0 0 0 2px #3fbf5a; }
.estud-meio { min-width: 0; flex: 1; }
.estud-nome { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.estud-oque { font-size: 13px; color: var(--text); margin-top: 2px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }   /* 24/09 (dono): assunto inteiro, sem três pontinhos */
.estud-tempo { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* selo de origem no treino (24/09/2026): questão da banca / do simulado */
.pill.pill-banca{background:linear-gradient(90deg,#b8860b,#e6b422);color:#1a1200;font-weight:700;border-color:transparent}
.pill.pill-anulada{background:#5b2330;color:#ffd6de;border-color:#8a3446;font-weight:700}
.pill.pill-simulado{background:rgba(80,140,255,.14);color:#9cc0ff;border-color:rgba(80,140,255,.35)}
/* QG (24/09/2026, dono: "um card tá topando no outro"): o card de aproveitamento colava na grade de atalhos */
.acoes-grid + .card, .acoes-grid + section { margin-top: 14px; }
/* LEÃO DO DIA (24/09/2026, dono: "o botão do leão ficou aqui" — escondido atrás da barra de baixo no celular).
   A barra "Matar o Leão" gruda acima da navegação e do cronômetro flutuante. */
/* 26/09/2026: a barra deixou de grudar (fica no fim da lista); só garante que o fim da lista não some atrás da navegação */
@media (max-width: 900px) {
  .leao-barra-enviar { margin-bottom: calc(90px + env(safe-area-inset-bottom)); }
}
/* QUESTÃO NA LEITURA DINÂMICA ACOMPANHA A FONTE DO TEXTO (25/09/2026, dono: "aumenta a fonte das questões, elas
   estão pequenas"). Enunciado e alternativas tinham 15px fixos no meio de um texto de ~18–30px; agora seguem o
   tamanho escolhido no A−/A+ do leitor (--pdf-fs), um pouco menores que o corpo. */
.pdf-read .pdfq-enun { font-size: clamp(15.5px, calc(var(--pdf-fs, 18px) * .95), 30px); line-height: 1.6; }
.pdf-read .pdfq-alt { font-size: clamp(15px, calc(var(--pdf-fs, 18px) * .9), 28px); line-height: 1.55; }
.pdf-read .pdfq-coment { font-size: clamp(14.5px, calc(var(--pdf-fs, 18px) * .85), 26px); line-height: 1.6; }
.pdf-read .pdfq-contexto { font-size: clamp(14px, calc(var(--pdf-fs, 18px) * .82), 25px); }
.pdf-read .pdfq-origem { font-size: clamp(12.5px, calc(var(--pdf-fs, 18px) * .7), 20px); }
.pdf-read .pdfq-num { font-size: clamp(11.5px, calc(var(--pdf-fs, 18px) * .66), 18px); }
.pdf-read .pdfq-letra { font-size: clamp(12px, calc(var(--pdf-fs, 18px) * .72), 20px); min-width: 1.9em; min-height: 1.9em; }
/* "‹ Anterior" das questões na leitura dinâmica (25/09/2026, dono: "o botão de anterior tá invisível"): o botão
   neutro herdava texto claro do tema escuro e sumia no sépia/claro. Agora tem cor e borda próprias em cada tema. */
.pdfq-nav .btn:not(.btn-primary) { color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); font-weight: 700; }
.pdf-read.tema-sepia .pdfq-nav .btn:not(.btn-primary), .pdf-read.tema-claro .pdfq-nav .btn:not(.btn-primary) { color: #33312c; background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.22); }
.pdfq-nav .btn:disabled { opacity: .45; }
.pdf-read .pdfq-nav .btn { font-size: clamp(13px, calc(var(--pdf-fs, 18px) * .72), 18px); }
/* frase que atravessa a página do PDF: sem vão entre as duas metades (25/09/2026) */
.pdf-read .pdf-par.pdf-emenda-a { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.pdf-read .pdf-par.pdf-emenda-b { margin-top: 0 !important; padding-top: 0 !important; text-indent: 0 !important; }
.pdf-read .pdf-pagina.pdf-pagina-emendada { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

/* 30/09/2026: quadro "Base" (artigo, súmula ou jurisprudência) no comentário da questão */
.base-legal { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--brand); background: var(--bg-3); color: var(--text); border-radius: 6px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }

/* 03/10/2026: popup da data de nascimento (aniversario.js) */
.aniv { text-align: center; }
.aniv-icone { width: 52px; height: 52px; margin: 2px auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 176, 1, 0.14); color: var(--brand); }
.aniv-icone svg { width: 26px; height: 26px; }
.aniv h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; color: var(--text); }
.aniv-sub { margin: 0 0 16px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.aniv-rotulo { display: block; text-align: left; font-size: 13px; font-weight: 700; color: var(--text-2); margin: 0 0 6px; }
.aniv-input { width: 100%; font-size: 18px; letter-spacing: .06em; text-align: center; }
.aniv-input[aria-invalid="true"] { border-color: #FF6B74; }
.aniv-erro { min-height: 20px; margin: 6px 0 12px; font-size: 13px; line-height: 1.4; color: #FF6B74; text-align: left; }
.aniv-bts { display: flex; flex-direction: column; gap: 8px; }
.aniv-bts .btn { width: 100%; min-height: 46px; }
[data-theme="light"] .aniv-erro { color: #B4232F; }
[data-theme="light"] .aniv-input[aria-invalid="true"] { border-color: #B4232F; }

/* 03/10/2026: catálogo de links do afiliado (afiliado.js) */
.afil-cat-h { margin: 22px 0 8px; display: flex; flex-direction: column; gap: 2px; }
.afil-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.afil-card { text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 72px; }
.afil-card b { font-size: 14px; line-height: 1.25; }
.afil-card span { font-size: 12px; color: var(--text-2); }
.afil-card:hover, .afil-card:focus-visible { border-color: var(--brand); }
.afil-grupo-h { margin: 14px 0 4px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 04/10/2026 suporte5648: o gesto de grifo pertence ao leitor, não ao scroll. */
.pdf-read.modo-grifar .pdf-par-texto, .pdf-read.modo-grifar .pdf-exemplo-texto,
.pdf-read.modo-grifar .pdf-tl, .pdf-read.modo-negrito .pdf-par-texto,
.pdf-read.modo-negrito .pdf-exemplo-texto, .pdf-read.modo-negrito .pdf-tl {
  touch-action: none;
}

/* 04/10/2026 (bateria do leitor no celular): arrastar o dedo na horizontal para grifar, começando na margem,
   virava o gesto "deslizar para voltar" do navegador — a página voltava e o leitor fechava sem salvar o gesto.
   O app não usa esse gesto: sem overscroll horizontal na página, e o leitor segura o próprio rolamento. */
html, body { overscroll-behavior-x: none; }
.pdf-viewer, .pdf-read { overscroll-behavior: contain; }
.pdf-read.modo-grifar, .pdf-read.modo-negrito, .pdf-read.modo-apagar { touch-action: pan-y; }
/* touch-action não vale em elemento em linha: o span .pdf-par-texto deixava o dedo rolar a página em vez de grifar
   (celular, 04/10/2026). A regra vai no bloco do parágrafo e no do exemplo. */
.pdf-read.modo-grifar .pdf-par, .pdf-read.modo-negrito .pdf-par,
.pdf-read.modo-grifar .pdf-exemplo, .pdf-read.modo-negrito .pdf-exemplo { touch-action: none; }

/* ---------- LEITOR, 08/10/2026 (dono, Resumo Tático no celular) ----------
   "Baixar PDF" mora também na barra fina de baixo — ela fica em tela cheia — e no celular a barra quebra em
   duas linhas em vez de esconder botões numa rolagem que ninguém vê. */
.pvb-dl { color: var(--brand) !important; white-space: nowrap; }
@media (max-width: 760px) {
  .pdf-viewer .pdf-viewbar { flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; overflow-x: visible; }
  .pdf-viewer .pdf-viewbar .pvb-rot { display: none; }
  .pdf-viewer .pdf-viewbar .pvb-fs { padding: 5px 8px; min-width: 34px; }
}
/* cabeçalho da marca ("Resumo Tático · Estratégia Militar") na leitura dinâmica: uma etiqueta pequena no topo,
   não um título gigante de letras espaçadas */
.pdf-read .pdf-par.pdf-kicker { font-family: Inter, Archivo, system-ui, sans-serif; font-size: 11.5px !important; line-height: 1.4; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand) !important; opacity: .9; margin: 0 0 10px !important; text-indent: 0; padding: 0; }
.pdf-read .pdf-par.pdf-kicker b { color: inherit !important; }
.pdf-read .pdf-par.pdf-kicker.pdf-kicker-rep { display: none; }
/* item de lista com chamada em negrito ("Ideia central — …") que o PDF desenhou com marcador gráfico */
.pdf-read .pdf-par.pdf-li.pdf-li-ponto::before { content: "•"; display: inline-block; width: 1.05em; color: var(--brand); font-weight: 800; }
.pdf-read .pdf-par.pdf-recuo { padding-left: .9em; border-left: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); margin-bottom: 8px; }
/* 08/10/2026 — as questões da banca no fim do Resumo Tático */
.pdf-banca-fim { max-width: min(clamp(760px, 74vw, 1180px), 92ch); margin: 8px auto 60px; padding: 0 16px; box-sizing: border-box; }
.pdf-banca-card { border: 1.5px solid var(--brand); border-radius: 16px; padding: 18px 18px 16px; background: color-mix(in srgb, var(--brand) 10%, transparent); font-family: Inter, Archivo, system-ui, sans-serif; }
.pdf-banca-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--brand); margin-bottom: 6px; }
.pdf-banca-card h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.pdf-banca-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; opacity: .9; }
.pdf-banca-card .btn { width: 100%; max-width: 360px; }
.pdf-read.tema-escuro .pdf-banca-card h3 { color: #fff; }
.pdf-top-btn.pdf-banca-btn { white-space: nowrap; }
.pdf-read.tema-escuro .pdf-banca-card { color: #ece6d8; }
.pdf-read.tema-sepia .pdf-banca-card, .pdf-read.tema-sepia .pdf-banca-card h3 { color: #2a2113; }
.pdf-read.tema-claro .pdf-banca-card, .pdf-read.tema-claro .pdf-banca-card h3 { color: #14120e; }

/* Resposta imediata enquanto a confirmação está em voo. */
.perf-salvando{opacity:.8}.perf-salvando .mm-check,.perf-salvando .mss-check{cursor:wait}


/* Ouvir: faixa dentro do leitor, inclusive no elemento em tela cheia. */
.pdf-audio-faixa { flex: 0 0 auto; position: relative; z-index: 10; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: var(--bg-2, #161b20); color: var(--text); border-top: 1px solid var(--line, #39414b); box-shadow: 0 -4px 16px #0003; }
.pdf-audio-faixa[hidden], .pdf-audio-bola[hidden] { display: none !important; }
.pdf-audio-controles { display: flex; align-items: center; gap: 6px; }
.pdf-audio-controles button, .pdf-audio-bola { min-width: 44px; min-height: 44px; border: 1px solid var(--line, #39414b); border-radius: 10px; color: var(--text); background: var(--bg-3, #242b32); cursor: pointer; }
.pdf-audio-controles input { flex: 1; min-width: 30px; width: 100%; accent-color: var(--brand); cursor: pointer; }
#pdf-audio-pos { font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdf-audio-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px; }
.pdf-audio-opcoes label { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.pdf-audio-opcoes select { min-height: 36px; max-width: 185px; border: 1px solid var(--line, #39414b); border-radius: 6px; background: var(--bg-3, #242b32); color: var(--text); font-size: 12px; padding: 3px 5px; }
#pdf-audio-aviso { font-size: 11px; margin-top: 4px; }
.pdf-audio-bola { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); right: 14px; z-index: 11; border-radius: 50%; box-shadow: 0 3px 12px #0006; }
.pdf-viewer.pdf-audio-aberto .pdf-read { min-height: 0; }
.pdf-par.tts-lendo, .pdf-tab tr.tts-lendo { outline: 2px solid var(--brand); outline-offset: 2px; background: color-mix(in srgb, var(--brand) 16%, transparent); }
.pdf-pagina.tts-lendo { outline: 2px solid var(--brand); }
@media (max-width: 480px) {
  .pdf-audio-faixa { padding-left: 8px; padding-right: 8px; }
  .pdf-audio-controles { flex-wrap: wrap; }
  .pdf-audio-controles input { order: 2; flex-basis: calc(100% - 102px); }
  #pdf-audio-pos { order: 3; width: 90px; text-align: right; }
  .pdf-audio-controles button:nth-last-child(2) { margin-left: auto; }
  .pdf-audio-opcoes { gap: 5px; }
  .pdf-audio-opcoes label { flex: 1; flex-direction: column; align-items: stretch; gap: 2px; min-width: 60px; }
  .pdf-audio-opcoes label:first-child { flex: 1.5; }
  .pdf-audio-opcoes select { width: 100%; min-width: 0; }
}

.pdf-audio-seletor { position: absolute; inset: 0; z-index: 20; background: #0008; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pdf-audio-seletor > div { width: min(100%, 360px); border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2, #161b20); color: var(--text); padding: 20px; }
.pdf-audio-seletor h3 { margin-top: 0; }

/* Menezes no leitor: mesma régua de fonte, tema e contraste da leitura. */
.modal.pdf-ia { --ia-bg:#201e19; --ia-text:#eee8da; --ia-border:#716a5d; --ia-muted:#d1c8b6; background:var(--ia-bg); color:var(--ia-text); max-width:760px; font-size:var(--pdf-fs,18px); }
.modal.pdf-ia[data-tema="claro"] { --ia-bg:#fbfaf7; --ia-text:#33312c; --ia-border:#7b766b; --ia-muted:#575249; }
.modal.pdf-ia[data-tema="sepia"] { --ia-bg:#f3ead6; --ia-text:#4a4234; --ia-border:#81765e; --ia-muted:#62563f; }
.pdf-ia h3 { color:var(--ia-text); }
.pdf-ia-texto { font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-size:clamp(14.5px,calc(var(--pdf-fs,18px)*.74 + .9vw),var(--pdf-fs,18px)); line-height:1.7; max-height:52vh; max-height:52dvh; overflow:auto; overflow-wrap:anywhere; overscroll-behavior:contain; padding:2px 4px; }
.pdf-ia-texto :is(p,div,span,button,.sub) { font-size:inherit !important; line-height:inherit !important; color:inherit !important; white-space:normal !important; }
.pdf-ia-texto :is(p,ul,ol) { margin:0 0 .85em; }
.pdf-ia-texto :is(ul,ol) { padding-left:1.5em; }
.pdf-ia-texto li { margin:.3em 0; }
.pdf-ia-texto p:last-child { margin-bottom:0; }
.pdf-ia-texto :is(strong,b) { color:inherit; font-weight:700; }
.pdf-ia .card { background:transparent; border-color:var(--ia-border); }
.pdf-ia-trecho { color:var(--ia-muted); font-size:inherit; line-height:1.6; max-height:100px; overflow:auto; overflow-wrap:anywhere; margin:8px 0 16px; font-style:italic; }
.pdf-ia-trecho p { margin:0 0 .5em; }
.pdf-ia-acoes { display:grid; gap:8px; margin:12px 0; }
.pdf-ia .btn { white-space:normal; font-size:16px; min-height:44px; }
.pdf-ia :is(.btn-outline,.btn-ghost) { color:var(--ia-text); border-color:var(--ia-border); background:transparent; }
.pdf-ia .btn-primary { color:#21180a; }
.pdf-ia-fonte { display:flex; justify-content:flex-end; gap:8px; margin:0 0 10px; }
.pdf-ia-fonte .btn { width:auto; min-width:48px; }
.pdf-ia label { display:block; margin:12px 0 8px; }
.pdf-ia textarea { width:100%; box-sizing:border-box; resize:vertical; font:inherit; line-height:1.5; background:var(--ia-bg); color:var(--ia-text); border:1px solid var(--ia-border); border-radius:10px; padding:12px; }
.pdf-ia textarea::placeholder { color:var(--ia-muted); }
.pdf-ia-status { color:var(--ia-muted); }
@media(min-width:640px) { .pdf-ia-acoes:has(#ia-salvar-caderno) { grid-template-columns:1fr 1fr; } }
.modal.pdf-ia .btn.btn-outline:is(:hover,:focus-visible), .modal.pdf-ia .btn.btn-ghost:is(:hover,:focus-visible) { color:var(--ia-text); background:var(--ia-bg); border-color:var(--ia-text); }

/* O card compartilhado herda o tema e a fonte da leitura, sem barra fixa externa. */
.pdf-read .pdfq-compartilhada .q-acoes { position: static; background: none; }
.pdf-read .pdfq-compartilhada .enunciado { font-size: var(--pdf-fs, 18px); }
.pdf-read .pdfq-compartilhada .alt { font-size: max(15px, calc(var(--pdf-fs, 18px) * .9)); }
.pdf-read.tema-claro .pdfq-compartilhada { --text: #232323; --text-2: #555; --muted: #555; --bg: #fff; --bg-2: #f5f5f5; --bg-3: #eee; --border: #bbb; --brand: #8a5600; }
.pdf-read.tema-sepia .pdfq-compartilhada { --text: #3b3021; --text-2: #625744; --muted: #625744; --bg: #f4ecd8; --bg-2: #eee5ce; --bg-3: #e8ddc4; --border: #baa987; --brand: #805100; }

/* 09/10/2026: o componente único respeita a tipografia do corpo do leitor. */
.q-enun-par { margin: 0 0 .65em; }
.q-enun-par:last-child { margin-bottom: 0; }
.q-enun-par.q-item, .q-enun-par.q-citacao { margin-left: 1.25em; }
.q-enun-par.q-comando { margin-top: .9em; }
.pdf-read .pdfq-compartilhada .enunciado,
.pdf-read .pdfq-compartilhada .alt {
  font-size: clamp(14.5px, calc(var(--pdf-fs, 18px) * .74 + 0.9vw), var(--pdf-fs, 18px));
  line-height: 1.7;
}
.pdf-read .pdfq-compartilhada .alt { padding: 7px 10px; min-height: 44px; }
.pdf-read .pdfq-compartilhada .alts { gap: 6px; }
.pdf-read .pdfq-compartilhada .letra { width: 1.7em; height: 1.7em; font-size: .8em; }
.pdf-read .pdfq-compartilhada .q-fonte { font-size: 12px; color: var(--text-2); }
.pdf-read .pdfq-compartilhada .pill-cod { font-size: 11px; overflow-wrap: anywhere; }
.pdfq-refazer-bloco { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.pdfq-refazer-bloco:empty { display: none; }
.pdfq-refazer-bloco .btn { flex: 1; min-width: 130px; }
/* Faixa própria fora da área rolável: nada pode passar por trás do nome. */
.pdf-viewer > .pdf-wm-fix {
  position: relative; inset: auto; flex: 0 0 auto; z-index: 30;
  margin: 0; padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  font-size: 12px; line-height: 1.4; opacity: 1; pointer-events: auto;
  color: #e7e0d0; background: #14120e; border-top: 1px solid #5e5545;
}
.pdf-viewer > .pdf-wm-fix[data-tema="sepia"] { color: #4a4234; background: #f3ead6; border-color: #baa987; }
.pdf-viewer > .pdf-wm-fix[data-tema="claro"] { color: #33312c; background: #fbfaf7; border-color: #bdb5a5; }
.pdf-viewer > .pdf-read { min-height: 0; padding-bottom: 28px; }

/* 09/10: player e navegação usam o texto do próprio tema de leitura. */
.pdf-read { --leitura-texto: #e7e0d0; --leitura-fundo: #14120e; }
.pdf-read.tema-sepia { --leitura-texto: #4a4234; --leitura-fundo: #f3ead6; }
.pdf-read.tema-claro { --leitura-texto: #33312c; --leitura-fundo: #fbfaf7; }
.pdf-read .pdfq, .pdf-read .pdfq-nav, .pdf-read .pdf-q-resumo {
  --text: var(--leitura-texto); --text-2: var(--leitura-texto); --muted: var(--leitura-texto);
  color: var(--leitura-texto);
}
.pdf-read .pdfq .enunciado, .pdf-read .pdfq .alt,
.pdf-read .pdfq .sub, .pdf-read .pdfq .q-prog,
.pdf-read .pdfq .q-fonte, .pdf-read .pdfq .feedback,
.pdf-read .pdfq-nav .sub { color: var(--leitura-texto); opacity: 1; }
.pdf-read .pdfq .btn:not(.btn-primary), .pdf-read .pdfq-nav .btn:not(.btn-primary) {
  color: var(--leitura-texto); background: var(--leitura-fundo);
}
.pdf-read .pdfq .btn-primary, .pdf-read .pdfq-nav .btn-primary {
  color: #211a0e; background: #ffb001;
}
.pdf-read .pdfq .btn:disabled, .pdf-read .pdfq-nav .btn:disabled {
  opacity: 1; cursor: default; border-style: dashed;
}

.pdf-read .pdfq .alt-linha.cortada .alt,
.pdf-read .pdfq .alt-linha.cortada .alt .letra,
.pdf-read .pdfq .alt-tecla, .pdf-read .pdfq .alt-tecla b { opacity: 1; }
.pdf-read .pdfq .resultado-flag, .pdf-read .pdfq .g-t,
.pdf-read .pdfq .comentario h4, .pdf-read .pdfq .coment-head i,
.pdf-read .pdfq .base-legal, .pdf-read .pdfq .fonte-legal {
  color: var(--leitura-texto);
}
.pdf-read .pdfq .coment-av { color: #211a0e; background: #ffb001; }

/* 09/10: notas acessíveis na leitura e no Caderno. */
button.pdf-nota-box { display:block; width:100%; text-align:left; font:inherit; white-space:pre-wrap; cursor:pointer; border:0; border-left:3px solid #dca33c; }
.pdf-nota-box:focus-visible,.pdf-nota-menu button:focus-visible,.cad-nota-acoes button:focus-visible { outline:3px solid #168cc9; outline-offset:3px; }
.pdf-nota-menu { position:fixed; z-index:10040; display:flex; gap:5px; padding:8px; border:1px solid var(--line,#777); border-radius:10px; background:var(--card,#202020); box-shadow:0 5px 24px #0006; }
.pdf-nota-menu button,.cad-nota-acoes button { min-height:44px; padding:7px 12px; border:1px solid var(--line,#777); border-radius:6px; background:var(--card,#202020); color:var(--text,#eee); cursor:pointer; font:inherit; }
.cad-nota-leitor { padding:14px; margin:12px 0; border:1px solid var(--line,#777); border-radius:10px; overflow-wrap:anywhere; }
.cad-nota-leitor small { display:block; opacity:.75; margin:5px 0; }
.cad-nota-leitor blockquote { margin:8px 0; padding:8px 12px; border-left:3px solid #dca33c; background:#dca33c15; }
.cad-nota-texto { white-space:pre-wrap; }
.cad-nota-acoes { display:flex; flex-wrap:wrap; gap:8px; }
.pdf-notas-orig { display:none; }
.pdf-tudo-orig .pdf-notas-orig { display:block; }
.pdf-atalhos button { border:1px solid currentColor; border-radius:5px; color:inherit; background:none; cursor:pointer; }
.pdf-atalhos-card { max-width:720px; max-height:85dvh; overflow:auto; padding:20px; background:var(--card,#202020); color:var(--text,#eee); border-radius:12px; }
.pdf-atalhos-card table { width:100%; border-collapse:collapse; }
.pdf-atalhos-card td { padding:7px 8px; border-bottom:1px solid var(--line,#555); }
.pdf-atalhos-card kbd { white-space:nowrap; }

/* 09/10: todo toque reage sem aguardar rede ou animação. */
button:active,.perf-toque{filter:brightness(1.22);outline:2px solid var(--brand);outline-offset:2px}.perf-atalhos{display:flex;gap:8px;flex-wrap:wrap}.perf-atalhos .btn{width:auto}.teo-mat-card,.teo-capa,.opr.entra,#view.anim-in{animation:none!important}

/* 10/10/2026: caixas PEGADINHA / NA PROVA do Resumo Tático na leitura dinâmica */
.pdf-read .pdf-par.pdf-caixa { border-left: 4px solid #e0a106; background: rgba(255,176,0,.13); padding: 6px 14px; margin-top: 0; margin-bottom: 0; border-radius: 0 6px 6px 0; }
.pdf-read .pdf-par.pdf-caixa + .pdf-par:not(.pdf-caixa) { margin-top: 12px; }
.pdf-read .pdf-par.pdf-caixa-pega { border-left-color: #d33a2c; background: rgba(211,58,44,.11); }
.pdf-read .pdf-par.pdf-caixa-rot { font-family: Inter, Archivo, system-ui, sans-serif; font-size: 12px !important; line-height: 1.4; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a6b00; margin-top: 14px; padding-bottom: 2px; }
.pdf-read .pdf-par.pdf-caixa-pega.pdf-caixa-rot { color: #c0321f; }

/* atalhos-rolagem 10/10/2026 (dono: "a rolagem para ver os atalhos no computador é impossível"): a camada não tinha
   posição; o cartão ficava preso no fim do body (overflow hidden no leitor) e a roda do mouse não chegava nele. */
#pdf-atalhos-painel{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55)}
#pdf-atalhos-painel .pdf-atalhos-card{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;width:100%}

/* barra-atalhos-empilhada 10/10/2026 (dono: "deixa essas informações uma abaixo da outra, para não precisar rolar para o lado") */
.pdf-atalhos{display:flex;flex-direction:column;gap:1px;white-space:normal;line-height:1.25;font-size:10.5px}
.pdf-atalhos>span{white-space:nowrap}
@media (hover: none), (max-width: 860px) { .pdf-atalhos { display: none; } }
/* toque-no-artigo 11/10/2026 (dono: "quando eu clicar no julgado, aparecer pra mim o trecho do julgado ou artigo") */
::highlight(emq-ref){text-decoration:underline dotted 2px;text-decoration-color:var(--brand,#FFB001);text-underline-offset:4px}
#pdf-read .pdf-par{cursor:text}
.pdf-ref-pop{position:fixed;z-index:10060;display:flex;flex-direction:column;max-height:min(62vh,540px);background:var(--card,#1d1a14);color:var(--text,#eee);
  border:1px solid var(--line,#4a4030);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
.pdf-ref-cab{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line,#4a4030)}
.pdf-ref-cab b{font-size:14px;font-weight:800}
.pdf-ref-cab button{border:0;background:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.pdf-ref-cab button:hover{background:rgba(127,127,127,.15)}
.pdf-ref-corpo{overflow:auto;padding:12px 16px 14px;overscroll-behavior:contain}
.pdf-ref-corpo p{margin:0 0 7px}
.pdf-ref-corpo p.alvo{background:rgba(255,176,1,.2);border-left:3px solid var(--brand,#FFB001);padding:3px 8px;border-radius:0 6px 6px 0}
.pdf-ref-art+.pdf-ref-art{border-top:1px dashed var(--line,#4a4030);margin-top:10px;padding-top:10px}
.pdf-ref-enun{font-size:16px}
.pdf-ref-fonte{font-size:12px;color:var(--muted,#9a8f7a);margin-top:8px!important}
.pdf-ref-fonte a{color:var(--brand,#FFB001);font-weight:700}
.pdf-ref-sal{color:var(--muted,#9a8f7a);text-align:center;margin:2px 0!important;letter-spacing:.2em}
.pdf-ref-mais{margin-top:6px;border:1px solid var(--line,#4a4030);background:none;color:var(--brand,#FFB001);font-weight:700;border-radius:8px;padding:5px 10px;cursor:pointer;font-size:13px}

/* cad-grade 11/10/2026 (dono: "caderno igual da teoria"): matérias em cartões numerados; aberta ocupa a largura toda */
.cad-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.cad-grade .cad-mat-card{margin:0;border:1px solid var(--line,#333);border-radius:14px;background:var(--card,#1a1a1a);overflow:hidden}
.cad-grade .cad-mat-card>.cad-mat-h{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 12px 16px;background:none;border:0;color:var(--text);cursor:pointer;text-align:center;position:relative}
.cad-grade .cad-mat-card .cad-badge{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.cad-grade .cad-mat-card .cad-mat-nome{font-weight:800;font-size:15px}
.cad-grade .cad-mat-card .cad-tags{position:static}
.cad-grade .cad-mat-card .cad-arr{position:absolute;right:14px;top:14px;opacity:.5}
.cad-grade .cad-mat-card.open{grid-column:1/-1}
@media (max-width:640px){.cad-grade{grid-template-columns:1fr}}
/* 12/10/2026 imagem privada do Caderno que não carregou: toque recarrega */
img.nb-img-falhou { min-height: 90px; min-width: 220px; padding: 18px; box-sizing: border-box; border: 2px dashed var(--brand, #FFB001); border-radius: 10px; background: var(--bg-3, #222); color: var(--text-2, #ccc); cursor: pointer; font-size: 14px; }