/* ==========================================================================
   Plataforma de Questões TRF · Estrutura e componentes.
   Cores, fontes e raios vêm do tema ativo (temas/*.css, escolhido em index.html).
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Todo texto é medido em rem: segue o tamanho de letra do navegador e o ajuste "Aa" do topo (--escala-texto).
   No celular a base é um pouco maior. */
html {
  font-size: calc(100% * var(--escala-texto, 1));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 768px) {
  html {
    font-size: calc(112.5% * var(--escala-texto, 1));
  }
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 0.9062rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Cabeçalho Fixo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.topo-marca {
  display: flex;
  align-items: center;
  /* Sem isto vale o "center" da regra geral de botão, e no celular (onde a marca estica) o logo vai para o meio. */
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.logo-emblema {
  width: 40px;
  height: 40px;
  display: block;
  /* O logo tem a "perna" do Q fora do círculo: sombra que segue o desenho, sem recorte redondo. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.marca-titulo {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.marca-sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ambar-texto);
}

.placar-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
}

.placar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 0.7812rem;
  border-radius: 999px;
}

.placar-rotulo {
  color: var(--ink-secondary);
}

.placar-item.ok strong {
  color: var(--ok);
}

.placar-item.erro strong {
  color: var(--danger);
}

.placar-item.destaque strong {
  color: var(--accent);
}

.topo-usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Perfil no topo: foto redonda com o primeiro nome embaixo; abre Minha Conta */
.usuario-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background var(--trans-fast);
}

.usuario-chip:hover,
.usuario-chip:focus-visible {
  background: var(--bg-subtle);
}

.usuario-chip-nome {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7188rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Foto de perfil (ou iniciais) emoldurada (moldura-foto.png), com a moldura por cima.
   --foto é o tamanho da foto; a moldura cresce em volta dela. As medidas do furo (frações do lado da moldura)
   são escritas pelo site/trocar-marca.py: não edite à mão o bloco entre os marcadores. */
.foto-moldura {
  /* trocar-marca:inicio */
  --furo-x: 0.1252;
  --furo-y: 0.099;
  --furo-d: 0.7495;
  /* trocar-marca:fim */
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(var(--foto) / var(--furo-d));
  height: calc(var(--foto) / var(--furo-d));
  line-height: 1;
}

.foto-moldura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('temas/caderno/moldura-foto.png') center / 100% 100% no-repeat;
  pointer-events: none;
}

.foto-perfil {
  position: absolute;
  left: calc(var(--furo-x) * 100%);
  top: calc(var(--furo-y) * 100%);
  width: calc(var(--furo-d) * 100%);
  height: calc(var(--furo-d) * 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.foto-perfil-topo {
  --foto: 30px;
  font-size: 0.75rem;
}

.foto-perfil-conta {
  --foto: 96px;
  font-size: 2.125rem;
}

/* ---------- Container Principal ---------- */
.container-principal {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 18px 64px;
}

/* ---------- Autenticação ---------- */
.tela-auth {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 90px);
}

.cartao-auth {
  width: 100%;
  max-width: 460px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.auth-cabecalho h1 {
  margin: 6px 0 8px;
  font-size: 1.375rem;
  font-family: var(--font-sans);
}

.etiqueta-topo {
  display: inline-block;
  font-size: 0.7188rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--destaque-texto);
  background: var(--destaque);
  padding: 3px 9px;
  border-radius: 999px;
}

.hero-questoes {
  margin: 0 0 12px;
}

.auth-abas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--bg-elevated);
  padding: 4px;
  border-radius: var(--radius-sm);
  margin: 18px 0;
}

.auth-aba {
  background: transparent;
  border: none;
  color: var(--ink-secondary);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
}

.auth-aba.ativa {
  background: var(--bg-surface);
  color: var(--ink-primary);
  box-shadow: var(--shadow-sm);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

label.check-newsletter {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-secondary);
  cursor: pointer;
}

.check-newsletter input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

/* Aceite de e-mails: obrigatório, por isso em destaque (LGPD, art. 9º, §3º). */
label.check-marketing {
  border-color: var(--accent);
  color: var(--ink-primary);
}

.auth-form .termos {
  margin: 0;
  font-size: 0.75rem;
}

#form-aceite h1 {
  margin: 0;
  font-size: 1.375rem;
}

/* "Para quais concursos você estuda?": caixas como etiquetas que acendem quando marcadas. */
fieldset.interesses {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

fieldset.interesses legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-primary);
}

fieldset.interesses legend span {
  font-weight: 400;
  color: var(--ink-secondary);
}

label.opcao-interesse {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 5px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--bg-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
}

.opcao-interesse input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.opcao-interesse:has(input:checked) {
  border-color: var(--accent);
  background: var(--destaque);
  color: var(--destaque-texto);
}

.opcao-interesse:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-oauth {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-oauth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--ink-primary);
  font-weight: 600;
  font-size: 0.9062rem;
  cursor: pointer;
  transition: background var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast);
  box-shadow: var(--shadow-sm);
}

.btn-oauth-google:hover {
  background: var(--bg-hover);
  border-color: var(--ink-secondary);
}

.auth-divisor {
  position: relative;
  text-align: center;
  margin: 6px 0;
}

.auth-divisor::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--border-soft);
}

.auth-divisor span {
  position: relative;
  background: var(--bg-surface);
  padding: 0 10px;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.auth-rodape {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* ---------- Formulários e Botões ---------- */
label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.7812rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

label.inline {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 8px 11px;
  font-family: var(--font-sans);
  font-size: 0.8438rem;
  color: var(--ink-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(140, 74, 39, 0.16);
}

button,
.link-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.8438rem;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primario {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primario:hover:not(:disabled) {
  background: var(--accent-hover);
}

.sec {
  background: var(--bg-elevated);
  color: var(--ink-primary);
  border-color: var(--border-strong);
}

.sec:hover:not(:disabled) {
  background: var(--bg-subtle);
}

.btn-fantasma {
  background: transparent;
  color: var(--ink-secondary);
  border-color: transparent;
}

.btn-fantasma:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--ink-primary);
}

.perigo {
  background: var(--danger);
  color: var(--bg-page);
}

.btn-curto {
  padding: 5px 10px;
  font-size: 0.7812rem;
}

.btn-entrar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-entrar .entrar-curto {
  display: none;
}

.btn-bloco {
  width: 100%;
  padding: 10px 16px;
}

.link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
}

.nota {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  margin: 0;
}

.barra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.barra.fim {
  justify-content: flex-end;
}

.msg {
  font-size: 0.8125rem;
  margin: 4px 0;
}

.msg.erro {
  color: var(--danger);
  font-weight: 600;
}

.msg.ok {
  color: var(--ok);
  font-weight: 600;
}

/* ---------- Painel de Filtros ---------- */
.painel-filtros {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.filtros-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.filtros-titulo-bloco {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.filtros-titulo-bloco h2 {
  margin: 0;
  font-size: 1.125rem;
  font-family: var(--font-sans);
}

.contador-questoes {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 999px;
}

.filtros-acoes-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.select-curto {
  width: auto;
  padding: 4px 8px;
}

.grade-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.filtro-largo {
  grid-column: span 2;
}

@media (max-width: 680px) {
  .filtro-largo {
    grid-column: span 1;
  }
}

.filtros-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.chips-ativos {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Filtros em uso: primeira linha do painel aberto */
.filtros-ativos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.filtros-ativos .chip {
  font-size: 0.7812rem;
  padding: 2px 4px 2px 10px;
}

/* Alvo de toque do "x" maior que o ícone */
.filtros-ativos .chip .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  color: inherit;
}

.btn-limpar-filtros {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.filtros-ativos-acoes {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
}

.filtro-salvo-ativo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

/* Caderno com questões novas que atendem aos filtros dele (painel e Desempenho → Cadernos) */
.aviso-caderno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  background: var(--accent-soft);
  color: var(--ink-primary);
  border-radius: var(--radius-sm);
}

.dash-item-card .aviso-caderno {
  margin: 4px 0 0;
}

/* Campos menos usados, recolhidos */
.mais-filtros {
  margin-top: 12px;
}

.mais-filtros > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  color: var(--accent);
  padding: 4px 0;
}

.mais-filtros > summary::after {
  content: "▾";
}

.mais-filtros[open] > summary::after {
  content: "▴";
}

.mais-filtros[open] > summary {
  margin-bottom: 10px;
}

/* Linhas de caixas "Excluir questões" e "Questões com" */
.filtros-checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 12px;
}

.filtros-checks .pilula[hidden] {
  display: none;
}

.filtros-checks-rotulo {
  font-weight: 700;
  min-width: 130px;
}

.dash-item-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ---------- Paginação ---------- */
.barra-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

/* ---------- Lista de Cartões de Questão ---------- */
.lista-questoes {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qc-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.2s;
}

.qc-card.respondida-acertou {
  border-left: 4px solid var(--ok);
}

.qc-card.respondida-errou {
  border-left: 4px solid var(--danger);
}

/* Cabeçalho da questão */
.qc-cabecalho {
  background: var(--bg-elevated);
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qc-topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.qc-trilha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.8438rem;
}

.qc-num-badge {
  background: var(--ink-primary);
  color: var(--bg-surface);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}

.qc-chip-prova {
  font-weight: 600;
  /* Nomes por extenso (órgão, banca, cargo): quebram linha no celular em vez de vazar. */
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: 10px;
  max-width: 100%;
}

.qc-disciplina {
  font-weight: 700;
  color: var(--accent);
}

.qc-topico {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ink-secondary);
}

.qc-meta-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.7812rem;
  color: var(--ink-secondary);
}

.qc-meta-item strong {
  color: var(--ink-primary);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7188rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--ink-secondary);
  border: 1px solid var(--border-soft);
}

.chip.ok {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok-border);
}

.chip.erro {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

.chip.aviso {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn-border);
}

.chip.primaria {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Selo com dica: o aviso curto no card; a explicação abre num balão (computador) ou numa folha (celular). */
button.chip-dica {
  font: inherit;
  font-size: 0.7188rem;
  font-weight: 600;
  min-height: 28px; /* alvo de toque confortável sem engordar o selo */
  padding: 3px 8px 3px 9px;
  cursor: pointer;
  transition: filter var(--trans-fast), box-shadow var(--trans-fast);
}
button.chip-dica:hover { filter: brightness(0.97); }
button.chip-dica[aria-expanded="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent); }
button.chip-dica:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dica-balao {
  position: absolute;
  z-index: 950;
  width: min(340px, calc(100vw - 24px));
  padding: 12px 14px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated, var(--bg-surface));
  color: var(--ink-primary);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  line-height: 1.5;
  animation: dica-entra 0.16s ease both;
}
.dica-balao[hidden], .dica-fundo[hidden] { display: none; }
.dica-balao:focus { outline: none; }
.dica-cabeca { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.dica-icone { display: inline-flex; padding-top: 2px; }
.dica-titulo { flex: 1; font-size: 0.875rem; line-height: 1.35; }
.dica-texto p { margin: 0; color: var(--ink-secondary); }
.dica-texto p + p { margin-top: 8px; }
.dica-fechar {
  display: none;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -8px -8px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
}
.dica-balao.tom-erro .dica-icone { color: var(--danger); }
.dica-balao.tom-aviso .dica-icone { color: var(--warn); }
.dica-balao.tom-primaria .dica-icone { color: var(--accent); }
.dica-balao.tom-ok .dica-icone { color: var(--ok); }
@keyframes dica-entra { from { opacity: 0; transform: translateY(-4px); } }
.dica-balao.acima { animation-name: dica-entra-acima; }
@keyframes dica-entra-acima { from { opacity: 0; transform: translateY(4px); } }

/* Celular: folha que sobe do rodapé, com fundo escurecido e botão de fechar (o voltar do aparelho também fecha). */
.dica-fundo {
  position: fixed;
  inset: 0;
  z-index: 949;
  background: rgba(0, 0, 0, 0.32);
  animation: dica-fundo 0.2s ease both;
}
.dica-balao.folha {
  position: fixed;
  left: 0 !important;
  right: 0;
  top: auto !important;
  bottom: 0;
  width: auto;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  border-bottom: 0;
  font-size: 0.9375rem;
  animation: folha-sobe 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dica-balao.folha::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 2px;
  background: var(--border-strong);
}
.dica-balao.folha .dica-titulo { font-size: 1rem; }
.dica-balao.folha .dica-fechar { display: inline-grid; }
body.com-folha { overflow: hidden; }
@keyframes folha-sobe { from { transform: translateY(100%); } }
@keyframes dica-fundo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dica-balao, .dica-balao.folha, .dica-fundo { animation: none; }
}

a.chip {
  text-decoration: none;
  cursor: pointer;
  transition: background var(--trans-fast), border-color var(--trans-fast);
}

a.chip:hover {
  background: var(--border-soft);
}

a.chip.primaria:hover {
  filter: brightness(1.08);
}

/* Corpo da Questão */
.qc-corpo {
  padding: 16px 20px;
}

/* Acordeon de Texto Associado */
.qc-texto-associado {
  margin-bottom: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.qc-texto-associado > summary {
  padding: 9px 14px;
  font-weight: 600;
  font-size: 0.8438rem;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qc-texto-associado > summary::-webkit-details-marker {
  display: none;
}

.qc-texto-associado-conteudo {
  padding: 14px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-surface);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.65;
  white-space: pre-wrap;
  max-height: none;
  overflow: visible;
}

.qc-linhas-numeradas {
  margin: 0;
  padding-left: 34px;
  font-family: var(--font-sans);
  font-size: 0.9062rem;
  line-height: 1.65;
}

.qc-linhas-numeradas li {
  padding-left: 6px;
  color: var(--ink-primary);
}

.qc-linhas-numeradas li::marker {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.7188rem;
}

/* Enunciado */
.qc-enunciado {
  font-family: var(--font-sans);
  font-size: 0.9688rem;
  line-height: 1.68;
  color: var(--ink-primary);
  margin-bottom: 16px;
  white-space: pre-wrap;
}

.qc-midia-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: #fff;
  padding: 6px;
}

/* Alternativas interativas */
.qc-alternativas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.qc-alt-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-input);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.15s;
}

.qc-alt-linha:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.qc-alt-linha.selecionada {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.qc-alt-linha.riscada {
  opacity: 0.48;
}

/* Gesto de riscar no toque: o navegador só cuida da rolagem vertical */
html.toque .qc-alt-linha {
  touch-action: pan-y;
}

html.toque .qc-btn-tesoura {
  display: none;
}

/* Dica de primeiro acesso: tela escurecida com foco numa alternativa sendo riscada */
.dica-riscar {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.dica-riscar-foco {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.78);
  outline: 2px solid rgba(255, 255, 255, 0.85);
  pointer-events: auto;
  transition: top 0.15s, left 0.15s, width 0.15s, height 0.15s;
}

.dica-riscar-dedo {
  position: absolute;
  top: 50%;
  left: 18%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: dica-riscar-dedo 3.2s ease-in-out infinite;
}

@keyframes dica-riscar-dedo {
  0%, 8% { transform: translateX(0) scale(1.2); opacity: 0; }
  11% { transform: translateX(0) scale(1); opacity: 1; }
  24% { transform: translateX(70px) scale(1); opacity: 1; }
  30%, 100% { transform: translateX(70px) scale(1.2); opacity: 0; }
}

.qc-alt-linha.dica-riscar-alvo {
  animation: dica-riscar-alvo 1.3s ease-in-out;
}

@keyframes dica-riscar-alvo {
  0%, 25% { transform: translateX(0); }
  60% { transform: translateX(70px); }
  100% { transform: translateX(0); }
}

.dica-riscar-balao {
  position: fixed;
  left: 16px;
  right: 16px;
  max-width: 420px;
  margin: 0 auto;
  background: var(--bg-surface);
  color: var(--ink-primary);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dica-riscar-balao p {
  margin: 0;
}

.dica-riscar-balao .btn-primario {
  align-self: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  .dica-riscar-dedo,
  .qc-alt-linha.dica-riscar-alvo {
    animation: none;
  }
}

.qc-alt-linha.arrastando {
  user-select: none;
  -webkit-user-select: none;
}

.qc-alt-linha.pronta-riscar {
  border-style: dashed;
  border-color: var(--ink-muted);
}

.qc-alt-linha.riscada .qc-alt-texto {
  text-decoration: line-through;
}

.qc-alt-linha.gabarito-correta {
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

.qc-alt-linha.marcada-errada {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.qc-btn-tesoura {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--ink-muted);
  font-size: 0.75rem;
  cursor: pointer;
  margin-top: 1px;
}

.qc-btn-tesoura:hover {
  background: var(--bg-subtle);
  color: var(--ink-primary);
}

.qc-alt-letra {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--ink-secondary);
  background: var(--bg-surface);
}

.qc-alt-linha.selecionada .qc-alt-letra {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.qc-alt-linha.gabarito-correta .qc-alt-letra {
  background: var(--ok);
  color: var(--bg-page);
  border-color: var(--ok);
}

.qc-alt-linha.marcada-errada .qc-alt-letra {
  background: var(--danger);
  color: var(--bg-page);
  border-color: var(--danger);
}

.qc-alt-texto {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.55;
  padding-top: 2px;
  white-space: pre-wrap;
}

/* Barra de Responder + Feedback */
.qc-acao-responder {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.qc-feedback {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.8438rem;
}

.qc-feedback.acertou {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok);
}

.qc-feedback.errou {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

.qc-feedback.neutro {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn);
}

/* Rodapé de Abas do Cartão (Gabarito Comentado | Comentários | Sinalizar Erro) */
.qc-rodape-abas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-soft);
}

.qc-aba-btn {
  background: var(--bg-surface);
  color: var(--ink-secondary);
  border: 1px solid var(--border-soft);
  padding: 6px 13px;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.qc-aba-btn:hover {
  background: var(--bg-subtle);
  color: var(--ink-primary);
}

.qc-aba-btn.ativa {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Gavetas do Cartão (Gabarito Comentado, Comentários, Sinalizar Erro) */
.qc-gaveta {
  padding: 18px 20px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-surface);
}

.qc-secao-explicacao {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qc-bloco-didatico {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
}

.qc-bloco-didatico h4 {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.qc-texto-formatado {
  white-space: pre-wrap;
  line-height: 1.65;
  font-size: 0.9062rem;
}

.qc-comentarios-alts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qc-com-alt-item {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-input);
  font-size: 0.8438rem;
}

.qc-com-alt-item.correta {
  border-left: 4px solid var(--ok);
}

/* Comentários dos Usuários */
.qc-lista-comentarios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.qc-comentario-card {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
}

.qc-comentario-card.resposta {
  margin-left: 26px;
  border-left: 3px solid var(--accent);
}

.qc-comentario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.7812rem;
}

.qc-comentario-autor {
  font-weight: 700;
  color: var(--ink-primary);
}

.qc-comentario-data {
  color: var(--ink-muted);
}

.qc-comentario-texto {
  white-space: pre-wrap;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Formulário de Sinalizar Erro */
.qc-form-sinalizar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}

.qc-aviso-moderacao {
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink-primary);
  font-size: 0.8125rem;
  border-left: 4px solid var(--accent);
}

/* Toast e Modal */
#toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 90;
  background: var(--ink-primary);
  color: var(--bg-surface);
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  font-size: 0.8438rem;
}

.modal-confirmar {
  background: var(--bg-surface);
  color: var(--ink-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  max-width: 420px;
  box-shadow: var(--shadow-md);
}

.modal-newsletter h2 {
  margin: 0 0 10px;
  font-size: 1.125rem;
}

.modal-newsletter p {
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Botão dentro do aviso flutuante */
.toast-acao {
  margin-left: 8px;
  padding: 2px 4px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Ícones: Material Symbols Rounded (preenchidos com a cor do texto; ver icones.js) */
.icone {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}
.icone-xs { width: 1em; height: 1em; vertical-align: -0.16em; opacity: 0.7; }
.icone-sm { width: 1.15em; height: 1.15em; vertical-align: -0.22em; }
.icone-lg { width: 1.4em; height: 1.4em; vertical-align: -0.3em; }

/* Markdown Tipografia */
.qc-md-h1, .qc-md-h2, .qc-md-h3, .qc-md-h4 {
  font-family: var(--font-sans);
  color: var(--ink-primary);
  margin: 1.1em 0 0.4em;
  font-weight: 700;
  line-height: 1.3;
}
.qc-md-h1 { font-size: 1.45rem; border-bottom: 1px solid var(--border-soft); padding-bottom: 0.3em; }
.qc-md-h2 { font-size: 1.25rem; }
.qc-md-h3 { font-size: 1.1rem; }
.qc-md-h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }

.qc-md-p {
  margin: 0.6em 0;
  line-height: 1.65;
  color: var(--ink-primary);
}
.qc-md-p:first-child { margin-top: 0; }
.qc-md-p:last-child { margin-bottom: 0; }

.qc-md-quote {
  margin: 0.9em 0;
  padding: 8px 16px;
  border-left: 3.5px solid var(--accent);
  background: var(--bg-elevated);
  color: var(--ink-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}
.qc-md-quote p { font-style: normal; }

.qc-callout {
  margin: 0.9em 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border-strong);
  background: var(--bg-elevated);
  font-size: 0.8438rem;
  line-height: 1.6;
}
.qc-callout-warning {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.09);
}
.qc-callout-note, .qc-callout-tip {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.qc-callout-caution, .qc-callout-important {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.09);
}

.qc-md-ul, .qc-md-ol {
  margin: 0.6em 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qc-md-ul li, .qc-md-ol li { line-height: 1.6; }

.qc-code-inline {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-elevated);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  color: var(--accent-hover);
}

.qc-code-block {
  margin: 0.8em 0;
  padding: 12px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.7812rem;
  line-height: 1.5;
}

.qc-tabela-wrap {
  overflow-x: auto;
  margin: 0.9em 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.qc-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  text-align: left;
}
.qc-md-table th, .qc-md-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.qc-md-table th {
  background: var(--bg-elevated);
  font-weight: 700;
  color: var(--ink-primary);
}
.qc-md-table tr:last-child td { border-bottom: none; }
.qc-md-table tr:hover { background: rgba(180, 140, 100, 0.04); }

/* ==========================================================================
   Navegação Superior (Caderno vs Desempenho)
   ========================================================================== */
.topo-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-subtle);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}

.topo-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  font-weight: 600;
  font-size: 0.8438rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--trans-fast);
}

.topo-nav-btn:hover {
  color: var(--ink-primary);
  background: var(--bg-surface);
}

.topo-nav-btn.ativa {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Botão de Mais Opções no Cabeçalho da Questão (Mobile-first)
   ========================================================================== */
.qc-btn-mais-opcoes {
  cursor: pointer;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  color: var(--ink-secondary);
  font-weight: 600;
  transition: all var(--trans-fast);
}

.qc-btn-mais-opcoes:hover,
.qc-btn-mais-opcoes.ativa {
  background: var(--bg-subtle);
  color: var(--ink-primary);
  border-color: var(--accent);
}

/* ==========================================================================
   Toggle dos Filtros no Mobile
   ========================================================================== */
.btn-toggle-filtros {
  display: none;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--ink-primary);
  font-weight: 600;
  font-size: 0.875rem;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.btn-toggle-filtros .barra-filtros-btn-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   Dashboard do Estudante
   ========================================================================== */
.tela-dashboard {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.dash-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.dash-cabecalho h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  color: var(--ink-primary);
}

.dash-abas {
  display: flex;
  background: var(--bg-subtle);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  gap: 4px;
}

.dash-aba {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  font-weight: 600;
  font-size: 0.8438rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--trans-fast);
}

.dash-aba:hover {
  color: var(--ink-primary);
}

.dash-aba.ativa {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.dash-kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-kpi-rotulo {
  font-size: 0.7812rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.dash-kpi-valor {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ink-primary);
}

.dash-kpi-sub {
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

.dash-kpi-card.destaque {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dash-kpi-card.destaque .dash-kpi-valor {
  color: var(--accent);
}

.dash-kpi-card.ok {
  border-color: var(--ok-border);
}
.dash-kpi-card.ok .dash-kpi-valor {
  color: var(--ok);
}

.dash-kpi-card.erro {
  border-color: var(--danger-border);
}
.dash-kpi-card.erro .dash-kpi-valor {
  color: var(--danger);
}

.progresso-barra {
  width: 100%;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.progresso-preenchimento {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.dash-grade-secoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.dash-secao {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.dash-secao-topo {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.dash-secao-topo h3 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  color: var(--ink-primary);
}

.dash-lista-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-item-linha {
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-item-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dash-item-nome {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-primary);
}

.dash-item-stats-num {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.dash-item-barra-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-item-barra {
  flex: 1;
  height: 7px;
  background: var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}

.dash-item-taxa-badge {
  font-weight: 700;
  font-size: 0.8125rem;
  min-width: 44px;
  text-align: right;
}

/* Meus Comentários no Dashboard */
.dash-comentarios-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-comentario-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-comentario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

.dash-comentario-texto {
  font-size: 0.9062rem;
  line-height: 1.6;
  color: var(--ink-primary);
  white-space: pre-wrap;
}

.dash-comentario-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Minha Conta no Dashboard */
.dash-conta-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Perfil centralizado: foto, nome, e-mail e data de cadastro, um embaixo do outro */
.dash-conta-perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dash-avatar-box {
  margin-bottom: 16px;
}

.dash-conta-nome {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--ink-primary);
  overflow-wrap: anywhere;
}

.dash-conta-email {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

.dash-conta-desde {
  margin: 10px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  font-size: 0.75rem;
  color: var(--ink-secondary);
}

.dash-conta-desde:empty {
  display: none;
}

.dash-form-nome {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.dash-conta-sair-box {
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Mobile / Telas Pequenas (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .topo {
    padding: 8px 14px;
    gap: 10px;
  }

  .marca-sub {
    display: none;
  }

  .placar-topo {
    display: none;
  }

  .topo-marca {
    gap: 8px;
  }

  /* Celular: topo numa linha só (marca à esquerda, botões de ícone à direita). */
  .topo {
    flex-wrap: nowrap;
  }

  .topo-marca {
    flex: 1 1 auto;
  }

  .logo-emblema {
    width: 34px;
    height: 34px;
  }

  .marca-titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
  }

  .topo-marca > span {
    min-width: 0;
  }

  .topo-nav {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .topo-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
  }

  .topo-nav-btn .icone-sm {
    width: 1.4em;
    height: 1.4em;
  }

  .topo-nav-btn .nav-rotulo,
  .topo-nav-btn #nav-taxa-badge,
  .usuario-chip-nome,
  #btn-sair {
    display: none;
  }

  /* Botões de ícone com 2.5rem (45 px no celular, acima do mínimo de toque de 44 px) e folga igual entre eles;
     a foto fica um pouco afastada dos botões e da borda. */
  .topo-usuario {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .topo .menu-texto > summary,
  .topo .btn-tema {
    width: 2.5rem;
    min-width: 0;
    height: 2.5rem;
  }

  .usuario-chip {
    order: 9;
    padding: 0 2px;
    margin-left: 4px;
  }

  /* Visitante no celular: ícone + "Entrar", na mesma altura dos botões de ícone */
  .topo .btn-entrar {
    height: 2.5rem;
    padding: 0 12px;
  }

  .btn-entrar .entrar-longo {
    display: none;
  }

  .btn-entrar .entrar-curto {
    display: inline;
  }

  .container-principal {
    padding: 10px 8px 40px;
  }

  .btn-toggle-filtros {
    display: flex;
  }

  /* Painel de Filtros recolhido por padrão no mobile */
  .painel-filtros:not(.aberto-mobile) .filtros-ativos,
  .painel-filtros:not(.aberto-mobile) .grade-filtros,
  .painel-filtros:not(.aberto-mobile) .filtros-checks,
  .painel-filtros:not(.aberto-mobile) .mais-filtros,
  .painel-filtros:not(.aberto-mobile) .filtros-rodape {
    display: none;
  }

  /* Tablet: campos em duas colunas, a busca na linha toda */
  .grade-filtros {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .grade-filtros .filtro-largo {
    grid-column: 1 / -1;
  }

  .filtros-checks {
    gap: 6px;
  }

  .filtros-checks-rotulo {
    min-width: 0;
    flex-basis: 100%;
    font-size: 0.8125rem;
  }

  .painel-filtros {
    padding: 12px 14px;
    margin-bottom: 12px;
  }

  .filtros-cabecalho {
    margin-bottom: 8px;
  }

  .filtros-acoes-topo {
    width: 100%;
    justify-content: space-between;
  }

  /* O botão "Filtros & Busca" já dá o título; fica só a contagem, e as opções aparecem com o painel aberto. */
  .filtros-titulo-bloco h2 {
    display: none;
  }

  .filtros-cabecalho .filtros-acoes-topo {
    width: auto;
  }

  .painel-filtros:not(.aberto-mobile) .filtros-acoes-topo {
    display: none;
  }

  .painel-filtros:not(.aberto-mobile) .filtros-cabecalho {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* Cartão da Questão no Mobile */
  .qc-card {
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
  }

  .qc-cabecalho {
    padding: 12px 14px;
  }

  .qc-topo-linha {
    gap: 8px;
  }

  .qc-trilha {
    gap: 6px;
    font-size: 0.7812rem;
  }

  .qc-meta-linha {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed var(--border-soft);
    gap: 8px;
  }

  .qc-corpo {
    padding: 14px 14px 16px;
  }

  .qc-texto-associado {
    margin: 0 0 14px;
  }

  .qc-enunciado {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 14px;
  }

  .qc-alt-linha {
    padding: 11px 12px;
    min-height: 48px;
    gap: 10px;
  }

  .qc-alt-letra {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  .qc-alt-texto {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .qc-btn-responder {
    width: 100%;
    min-height: 44px;
    font-size: 0.9375rem;
    padding: 12px;
  }

  .qc-gaveta-botoes {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 4px;
  }

  .qc-gaveta-botoes button {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 0.7812rem;
  }

  .dash-grade-secoes {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dash-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .dash-kpi-card {
    padding: 14px;
  }

  .dash-kpi-valor {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .dash-kpis {
    grid-template-columns: 1fr;
  }
}


/* ---------- Modo visitante (sem conta) ---------- */
.faixa-visitante {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 16px;
  background: var(--destaque);
  color: var(--destaque-texto);
  border-radius: var(--radius-md);
  font-weight: 600;
}

.faixa-conta {
  background: var(--bg-surface);
  color: var(--ink-primary);
  border: 1px solid var(--border-strong);
  font-weight: 500;
}

.faixa-visitante .barra {
  gap: 8px;
}

.cartao-limite {
  margin: 18px 0;
  padding: 24px;
  text-align: center;
  background: var(--bg-surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

.cartao-limite h3 {
  margin: 0 0 6px;
}

.cartao-limite .barra {
  justify-content: center;
  margin-top: 12px;
}

/* Diálogo "Nome do caderno / do filtro" */
#dlg-nome {
  width: min(92vw, 440px);
}

#dlg-nome input {
  width: 100%;
  margin: 6px 0 14px;
}

/* ---------- Desempenho: cartões, gráficos e análise completa ---------- */
.dash-item-card {
  padding: 12px 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-item-topo,
.dash-item-metricas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-item-metricas { font-size: 0.8438rem; color: var(--ink-secondary); }

.dash-secao + .dash-secao,
.dash-kpis + .dash-secao { margin-bottom: 28px; }
#dash-resumo > .dash-secao,
#dash-completo > .dash-secao { margin-bottom: 28px; }

.dash-secao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.dash-completo-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.dash-acoes-rodape { display: flex; justify-content: center; }

.graf-caixa { width: 100%; }
.graf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf-svg text { font-family: var(--font-sans); }
.graf-grade { stroke: var(--graf-grade); stroke-width: 1; }
.graf-base { stroke: var(--border-strong); stroke-width: 1; }
.graf-eixo { fill: var(--ink-muted); font-size: 0.6875rem; }
.graf-rotulo { fill: var(--ink-primary); font-size: 0.8125rem; font-weight: 700; }
.graf-acerto { fill: var(--graf-acerto); }
.graf-erro { fill: var(--graf-erro); }
.graf-linha { fill: none; stroke: var(--graf-linha); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graf-ponto { fill: var(--graf-linha); stroke: var(--bg-surface); stroke-width: 2; }
.graf-alvo { fill: transparent; }
.graf-coluna { outline: none; cursor: default; }
.graf-coluna:hover .graf-alvo,
.graf-coluna:focus-visible .graf-alvo { fill: var(--bg-elevated); }
.graf-coluna:focus-visible .graf-alvo { stroke: var(--accent); stroke-width: 1.5; }
.graf-vazio { margin: 8px 0; }

.graf-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ink-secondary); }
.graf-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.graf-amostra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.graf-amostra.graf-acerto { background: var(--graf-acerto); }
.graf-amostra.graf-erro { background: var(--graf-erro); }

.graf-dica {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--ink-primary);
  color: var(--bg-page);
  font-size: 0.8125rem;
  box-shadow: var(--shadow-md);
}
.graf-dica[hidden] { display: none; }

.graf-barras { display: flex; flex-direction: column; gap: 14px; }
.graf-barra-linha { display: flex; flex-direction: column; gap: 6px; }
.graf-barra-topo,
.graf-barra-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.graf-barra-nome { font-weight: 600; color: var(--ink-primary); }
.graf-barra-pct { font-size: 0.9375rem; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.graf-barra-rodape .nota { font-size: 0.7812rem; }
.graf-barra-trilho { height: 10px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.graf-barra-valor { height: 100%; border-radius: 999px; background: var(--graf-barra); }

.dash-erros-total {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.dash-erros-total .btn-secundario { margin-left: auto; }
.dash-erro-linha {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dash-conta-perigo {
  padding: 16px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.dash-conta-perigo h4 { margin: 0; color: var(--danger); }
.dash-conta-perigo .nota { margin: 0; }

@media (max-width: 480px) {
  .dash-erro-linha { grid-template-columns: 1fr auto; }
  .dash-erro-linha .btn-secundario { grid-column: 1 / -1; justify-self: start; }
}

/* Botões pequenos das listas (Praticar, Refazer, Excluir...) */
.btn-secundario {
  background: var(--bg-surface);
  color: var(--ink-primary);
  border-color: var(--border-strong);
}
.btn-secundario:hover:not(:disabled) { background: var(--destaque); color: var(--destaque-texto); }
.btn-perigo {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-border);
}
.btn-perigo:hover:not(:disabled) { background: var(--danger-bg); }
.btn-sm { padding: 5px 11px; font-size: 0.7812rem; }

/* Abas do Desempenho no celular: quebram em duas linhas em vez de vazar a tela */
@media (max-width: 680px) {
  .dash-abas { flex-wrap: wrap; width: 100%; }
  .dash-aba { flex: 1 1 calc(50% - 4px); padding: 8px 10px; }
}

/* Aviso fixo de histórico excluído, até a exclusão física ou até desfazer */
.faixa-exclusao {
  background: var(--warn-bg);
  color: var(--ink-primary);
  border: 1px solid var(--warn-border);
  font-weight: 500;
  margin-top: 14px;
}

/* ---------- Campo digitável com autocompletar (criarCombo) ---------- */
.combo { position: relative; }
.combo-origem { display: none; }
.combo-input {
  padding-right: 30px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.combo.com-valor .combo-input { border-color: var(--accent); font-weight: 600; }
.combo-input::placeholder { color: var(--ink-secondary); opacity: 1; }
.combo-input:disabled { opacity: 0.6; cursor: not-allowed; }
.combo-lista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.combo-lista[hidden] { display: none; }
.combo-opcao,
.combo-vazio {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.8438rem;
  font-weight: 500;
  color: var(--ink-primary);
  cursor: pointer;
}
.combo-vazio { color: var(--ink-muted); cursor: default; }
.combo-todas { color: var(--ink-secondary); font-style: italic; }
.combo-opcao.ativa { background: var(--bg-elevated); }
.combo-opcao.escolhida { font-weight: 700; }
.combo-opcao.escolhida::after { content: " ✓"; color: var(--accent); }
/* Quantas questões o valor traz com os outros filtros escolhidos */
.combo-n { margin-left: 6px; color: var(--ink-muted); font-weight: 500; font-size: 0.75rem; }
.combo-sub { display: block; color: var(--ink-muted); font-size: 0.75rem; font-weight: 400; }
.combo-n::before { content: "· "; }

/* ---------- Filtros de marcar em pílulas ---------- */
.pilula {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--ink-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}
/* o checkbox continua lá (teclado, leitor de tela), só não aparece */
.pilula input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.pilula:hover { border-color: var(--accent); background: var(--bg-elevated); }
.pilula span::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-weight: 700;
  color: var(--ink-muted);
}
.pilula:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.pilula:has(input:checked) span::before { content: "✓"; color: inherit; }
.pilula:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.filtros-checks { gap: 8px 8px; }
.filtros-checks-rotulo { margin-right: 6px; }

@media (max-width: 680px) {
  .filtros-checks-rotulo { flex-basis: 100%; min-width: 0; }
}

/* Imagem no meio da frase (tecla, fração) e imagens nas alternativas, junto da letra */
.qc-midia-img.qc-midia-inline {
  display: inline-block;
  vertical-align: middle;
  max-height: 3em;
  width: auto;
  margin: 0 4px;
  padding: 2px;
}
.qc-alt-texto .qc-midia-img { margin: 2px 0; }

/* Botão de tema só com ícone, quadrado */
.btn-tema { width: 34px; height: 34px; padding: 0; justify-content: center; }
.btn-tema .icone-sm { width: 18px; height: 18px; }

/* ---------- Tamanho do texto (menu "Aa" no topo) ---------- */
.menu-texto {
  position: relative;
}

.menu-texto > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--ink-primary);
  font-weight: 700;
  cursor: pointer;
}

.menu-texto > summary::-webkit-details-marker {
  display: none;
}

.menu-texto[open] > summary {
  border-color: var(--accent);
  color: var(--accent);
}

.menu-texto-painel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

.menu-texto-painel button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-weight: 700;
}

.menu-texto-painel output {
  min-width: 3.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------- Desempenho: resumo em cartões, rosca e seções recolhíveis ---------- */
:root {
  --pizza-certas: #2a7fc4;
  --pizza-erradas: #e2733f;
}

html[data-tema="escuro"] {
  --pizza-certas: #3f8ccc;
  --pizza-erradas: #e0703f;
}

.dash-cartao {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}

.dash-cartao h3 {
  margin: 0 0 12px;
  font-size: 1.0625rem;
}

.dash-subtitulo {
  margin: 20px 0 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.dash-visao {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  align-items: center;
  gap: 24px 32px;
}

.pizza {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pizza-caixa {
  width: min(100%, 13rem);
}

.pizza-svg {
  display: block;
  width: 100%;
  height: auto;
}

.pizza-trilho {
  fill: none;
  stroke: var(--bg-subtle);
  stroke-width: 22;
}

.pizza-fatia {
  fill: none;
  stroke-width: 22;
  cursor: default;
  transition: stroke-width var(--trans-fast);
}

.pizza-fatia:hover,
.pizza-fatia:focus-visible {
  stroke-width: 26;
  outline: none;
}

.pizza-certas { stroke: var(--pizza-certas); }
.pizza-erradas { stroke: var(--pizza-erradas); }

.pizza-centro {
  fill: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 700;
}

.pizza-centro-sub {
  fill: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 13px;
}

.pizza-legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

.pizza-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pizza-legenda-item strong {
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}

.pizza-amostra {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.pizza-amostra.pizza-certas { background: var(--pizza-certas); }
.pizza-amostra.pizza-erradas { background: var(--pizza-erradas); }

.dash-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 12px;
  margin: 0;
}

.dash-numeros > div {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  min-width: 0;
}

.dash-numeros dt {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.dash-numeros dd {
  margin: 0;
}

.dash-numeros-valor {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.dash-numeros-sub {
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

.dash-btn-largo {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 2.75rem;
}

#btn-dash-completo {
  margin: 8px 0 24px;
}

/* Seções recolhíveis: o título é o próprio botão (summary), com seta que gira. */
.dash-dobra {
  padding: 0;
}

.dash-dobra > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  min-height: 3rem;
  cursor: pointer;
  list-style: none;
}

.dash-dobra > summary::-webkit-details-marker {
  display: none;
}

.dash-dobra > summary h3 {
  margin: 0;
}

.dash-dobra > summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--trans-fast);
}

.dash-dobra[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.dash-dobra > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.dash-dobra-corpo {
  padding: 0 20px 20px;
}

.dash-nota-dobra {
  margin: 12px 0 0;
}

.dash-nota-dobra > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 8px 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

#dash-completo > .dash-nota-dobra {
  margin: 0 0 12px;
}

.dash-erros-lista {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.dash-erros-lista li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
}

.dash-erros-nome {
  min-width: 0;
}

#dash-focar .graf-barra-linha + .graf-barra-linha {
  margin-top: 14px;
}

.dash-completo-topo {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .dash-cabecalho {
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .dash-cabecalho h2 {
    font-size: 1.375rem;
  }

  .dash-cabecalho-nota {
    display: none;
  }

  /* Abas numa linha só, rolando para o lado em vez de ocupar duas linhas. */
  .dash-abas {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .dash-abas::-webkit-scrollbar {
    display: none;
  }

  .dash-aba {
    flex: 0 0 auto;
    min-height: 2.75rem;
  }

  .dash-cartao {
    padding: 16px;
    margin-bottom: 12px;
  }

  .dash-dobra {
    padding: 0;
  }

  .dash-dobra > summary {
    padding: 14px 16px;
  }

  .dash-dobra-corpo {
    padding: 0 16px 16px;
  }

  .dash-visao {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dash-numeros {
    gap: 8px;
  }

  .dash-numeros > div {
    padding: 10px;
  }

  .dash-numeros-valor {
    font-size: 1.25rem;
  }
}

.dash-voltar {
  margin-bottom: 8px;
}

.marca-titulo-curto {
  display: none;
}

/* Nome completo só com espaço de sobra; no celular e no tablet, o nome curto e menor ao lado do logo. */
@media (max-width: 768px) {
  .marca-titulo {
    display: none;
  }

  .marca-titulo-curto {
    display: block;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Celular estreito: só o logo (o botão tem o nome no title). */
@media (max-width: 360px) {
  .topo-marca > span {
    display: none;
  }
}

@media (max-width: 480px) {
  /* A etiqueta e a paginação de cima saem (a de baixo continua). */
  #tela-estudo > .hero-questoes,
  #paginacao-topo {
    display: none;
  }
}

/* ---------- Aparência: janela com o modo e os temas de cores ---------- */
.modal-aparencia {
  width: min(40rem, calc(100vw - 32px));
  max-height: min(44rem, calc(100dvh - 48px));
  padding: 0;
  background: var(--bg-surface);
  color: var(--ink-primary);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.modal-aparencia[open] { display: flex; }
.modal-aparencia::backdrop { background: rgba(10, 14, 20, 0.45); }

.aparencia {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.aparencia-topo,
.aparencia-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}
.aparencia-topo { border-bottom: 1px solid var(--border-soft); }
.aparencia-rodape { justify-content: flex-end; border-top: 1px solid var(--border-soft); }
.aparencia-topo h2 { margin: 0; font-size: 1.125rem; }
.aparencia-fechar {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.aparencia-rodape .btn-primario { min-width: 8rem; justify-content: center; }

.aparencia-corpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 20px;
}

.aparencia-grupo {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
}
.aparencia-grupo:last-child { margin-bottom: 0; }
.aparencia-grupo legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.aparencia-nota { margin: 8px 0 0; font-size: 0.8125rem; color: var(--ink-muted); }
/* Claro/escuro: faixa fixa entre o título e a lista de paletas, com fundo próprio para não sumir atrás das cores */
.aparencia-grupo.aparencia-modo {
  flex: none;
  margin: 0;
  padding: 14px 20px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-soft);
}
.aparencia-modo legend { float: left; width: 100%; }
.aparencia-modo legend + * { clear: both; }
.aparencia-modo .segmentado { background: var(--bg-surface); }

/* controle segmentado (rádios de verdade: setas do teclado e leitor de tela funcionam) */
.segmentado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.segmentado label { position: relative; display: block; }
.segmentado input,
.opcao-tema input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.segmentado span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 2.75rem;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
}
.segmentado span:hover { color: var(--ink-primary); }
.segmentado input:checked + span {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.segmentado input:focus-visible + span,
.opcao-tema:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lista-temas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 8px;
}

.opcao-tema {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "texto marca" "cores cores";
  align-items: center;
  gap: 10px 8px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--trans-fast), background var(--trans-fast);
}
.opcao-tema:hover { border-color: var(--border-strong); }
.opcao-tema:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-soft);
}

.opcao-tema-texto { grid-area: texto; display: flex; flex-direction: column; min-width: 0; }
.opcao-tema-texto strong { font-size: 1rem; }
.opcao-tema-texto small { font-size: 0.8125rem; color: var(--ink-muted); }

.opcao-tema-marca {
  grid-area: marca;
  width: 1.5rem;
  height: 1.5rem;
  padding: 3px;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--accent);
  visibility: hidden;
}
.opcao-tema:has(input:checked) .opcao-tema-marca { visibility: visible; }

/* a faixa usa as variáveis do próprio tema (data-paleta na faixa), não as da tela */
.opcao-tema-cores {
  grid-area: cores;
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 1fr 1fr;
  height: 2rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}
.opcao-tema-cores i:nth-child(1) { background: var(--bg-page); }
.opcao-tema-cores i:nth-child(2) { background: var(--bg-surface); border-left: 1px solid var(--border-soft); }
.opcao-tema-cores i:nth-child(3) { background: var(--destaque); }
.opcao-tema-cores i:nth-child(4) { background: var(--accent); }
.opcao-tema-cores i:nth-child(5) { background: var(--ink-primary); }

/* celular: a janela vira uma folha que sobe da base da tela, ao alcance do polegar */
@media (max-width: 600px) {
  .modal-aparencia {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
  .modal-aparencia[open] { animation: aparencia-sobe 0.22s ease-out; }
  .aparencia-topo, .aparencia-rodape { padding: 12px 16px; }
  .aparencia-corpo { padding: 14px 16px 16px; }
  .aparencia-grupo.aparencia-modo { padding: 12px 16px 14px; }
  .aparencia-rodape { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .aparencia-rodape .btn-primario { width: 100%; min-height: 2.75rem; }
  .lista-temas { grid-template-columns: 1fr; }
}
@keyframes aparencia-sobe { from { transform: translateY(24px); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .modal-aparencia[open] { animation: none; }
}

/* ---------- Landing do visitante (sem conta) ---------- */
.landing {
  min-height: 100vh;
  padding: 0 16px 56px;
  background:
    radial-gradient(1100px 520px at 50% -120px, var(--accent-soft), transparent 70%),
    var(--bg-page);
}

.landing-barra {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-blog {
  color: var(--ink-secondary);
  font-weight: 600;
  text-decoration: none;
}

.landing-blog:hover {
  color: var(--accent);
}

.landing-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 0 48px;
  text-align: center;
}

.landing-logo {
  display: block;
  width: 176px;
  height: 176px;
  margin: 0 auto 22px;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18));
}

.landing-selo {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid var(--ok-border);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-titulo {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 4.2vw + 1rem, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink-primary);
  text-wrap: balance;
}

.landing-titulo em {
  font-style: normal;
  color: var(--accent);
  background: linear-gradient(transparent 62%, var(--destaque) 62%);
  padding: 0 0.08em;
}

.landing-sub {
  max-width: 640px;
  margin: 0 auto 30px;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3rem);
  line-height: 1.55;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.landing-acoes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-btn {
  min-height: 58px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-size: 1.125rem;
  font-weight: 700;
  gap: 10px;
}

.landing-btn-principal {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent);
}

.landing-btn-principal:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.landing-btn-google {
  background: var(--bg-surface);
  color: var(--ink-primary);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.landing-btn-google:hover:not(:disabled) {
  border-color: var(--ink-secondary);
  transform: translateY(-1px);
}

.landing-micro {
  margin: 14px 0 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.landing-beneficios {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.landing-beneficios li {
  padding: 24px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.landing-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.landing-icone svg {
  width: 24px;
  height: 24px;
}

.landing-beneficios h2 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink-primary);
}

.landing-beneficios p {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-secondary);
}

.landing-autor {
  max-width: 760px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
}

.landing-autor img {
  flex: none;
}

.landing-autor p {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--ink-secondary);
}

.landing-autor strong {
  color: var(--ink-primary);
}

.landing-final {
  max-width: 1080px;
  margin: 40px auto 0;
  padding: 44px 24px;
  text-align: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-lg);
}

.landing-final h2 {
  margin: 0 0 22px;
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.4rem);
  line-height: 1.15;
  text-wrap: balance;
}

.landing-final .landing-btn-principal {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.landing-final .landing-btn-principal:hover:not(:disabled) {
  background: var(--bg-elevated);
}

.landing-final p {
  margin: 16px 0 0;
  font-size: 1rem;
}

.landing-link {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .landing-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .landing-hero { padding: 8px 0 36px; }
  .landing-logo { width: 132px; height: 132px; margin-bottom: 18px; }
  .landing-acoes { flex-direction: column; }
  .landing-btn { width: 100%; }
  .landing-beneficios { grid-template-columns: 1fr; }
  .landing-autor { flex-direction: column; text-align: center; }
  .landing-final { padding: 34px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-btn:hover:not(:disabled) { transform: none; }
}

/* Desempenho → Por disciplina: as que ainda não começaram, numa linha só */
.dash-nao-iniciadas {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8125rem;
}
.dash-nao-iniciadas-rotulo { display: block; margin-bottom: 6px; color: var(--ink-secondary); font-weight: 600; }
.dash-nao-iniciadas ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.dash-nao-iniciadas li { display: inline-flex; align-items: center; gap: 4px; }
.dash-nao-iniciadas .btn-comecar { display: inline-flex; align-items: center; gap: 2px; font-size: 0.8125rem; }

/* Celular: um campo de filtro por linha, porque os valores (assunto, cargo, instituição) são longos */
@media (max-width: 560px) {
  .painel-filtros .grade-filtros { grid-template-columns: 1fr; }
}

/* ---------- Celular: filtros em tela cheia, listas em tela cheia e barra fixa da resolução ---------- */
.so-celular,
.btn-fechar-filtros,
.combo-cabecalho,
.barra-resolucao {
  display: none;
}

.btn-fechar-filtros {
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--ink-primary);
}

@media (max-width: 768px) {
  .so-desktop { display: none; }
  .so-celular { display: inline; }

  /* Painel aberto: tela cheia, cabeçalho e rodapé presos, o meio rola */
  body.filtros-tela-cheia { overflow: hidden; }

  .painel-filtros.aberto-mobile {
    position: fixed;
    inset: 0;
    z-index: 45;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .painel-filtros.aberto-mobile .filtros-cabecalho {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -16px 12px;
    padding: 12px 16px;
    background: var(--bg-surface);
  }

  .painel-filtros.aberto-mobile .btn-fechar-filtros { display: inline-flex; }
  .painel-filtros.aberto-mobile .filtros-acoes-topo { order: 4; width: 100%; }

  .painel-filtros.aberto-mobile .filtros-rodape {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 16px -16px 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: var(--bg-surface);
  }

  .painel-filtros.aberto-mobile .filtros-rodape .barra { width: 100%; }
  .painel-filtros.aberto-mobile .filtros-rodape .barra > * { flex: 1 1 0; }
  .painel-filtros.aberto-mobile .filtros-rodape .btn-primario { flex-basis: 100%; order: -1; padding-block: 12px; }

  /* Lista de escolha aberta: tela cheia, com o nome do campo e "Concluído" no alto */
  .combo.tela-cheia {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: var(--bg-surface);
  }

  .combo.tela-cheia .combo-cabecalho {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .combo-titulo { font-weight: 700; font-size: 1rem; color: var(--ink-primary); }

  .combo.tela-cheia .combo-lista {
    position: static;
    flex: 1;
    max-height: none;
    overflow-y: auto;
  }

  .combo.tela-cheia .combo-opcao { padding-block: 12px; }

  /* Barra fixa da resolução */
  .barra-resolucao:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    display: flex;
    gap: 8px;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    background: var(--bg-surface);
    border-top: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
  }

  .barra-resolucao > button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; }
  .barra-resolucao > #br-responder { flex-grow: 1.4; }

  /* O fim da lista e os avisos não ficam atrás da barra */
  #tela-estudo:has(.barra-resolucao:not([hidden])) { padding-bottom: 72px; }
  body:has(.barra-resolucao:not([hidden])) #toast { bottom: 84px; }
  .lista-questoes > .qc-card { scroll-margin-top: 72px; }
}

/* ---------- Explicação por IA ---------- */
.qc-ia { display: flex; flex-direction: column; gap: 12px; }
.qc-ia-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.btn-ia { display: inline-flex; align-items: center; gap: 6px; }
.qc-ia-restam { font-size: 0.8125rem; color: var(--ink-secondary); }
.qc-ia-carregando { display: flex; align-items: center; gap: 10px; color: var(--ink-secondary); font-size: 0.9375rem; }
.qc-ia-pulso { display: inline-flex; color: var(--accent); animation: qc-ia-pulso 1.4s ease-in-out infinite; }
@keyframes qc-ia-pulso { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }
.qc-ia-erro { border-top: 1px solid var(--border-soft); padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .qc-ia-pulso { animation: none; } }

/* ---------- Círculo de progresso da busca ---------- */
.carregando {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
}
.carregando[hidden] { display: none; }
.carregando::before {
  content: '';
  position: absolute;
  width: 168px;
  height: 148px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.carregando-anel {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 6px solid var(--border-soft);
  border-top-color: var(--ambar);
  animation: carregando-gira 0.9s linear infinite;
}
.carregando-texto {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-secondary);
}
.lista-questoes[aria-busy="true"] { opacity: 0.45; transition: opacity var(--trans-fast); }
@keyframes carregando-gira { to { transform: rotate(360deg); } }
/* Sem giro para quem pede menos movimento: o anel pulsa devagar e o texto diz o que acontece. */
@media (prefers-reduced-motion: reduce) {
  .carregando-anel { animation: carregando-pulsa 1.6s ease-in-out infinite; }
}
@keyframes carregando-pulsa { 50% { opacity: 0.4; } }

/* Texto da prova: as quebras de linha são do caderno. */
.qc-texto-prova { white-space: pre-line; }

/* ---------- Prova em PDF: janela dentro da plataforma (pdf_visualizador.js) ---------- */
html.pdfv-aberto { overflow: hidden; }

.modal-pdf {
  width: min(1040px, 96vw);
  height: 94dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.modal-pdf::backdrop { background: rgba(10, 14, 20, 0.55); }

.pdfv-area {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* A pinça fica com o visualizador (zoom do PDF), não com o navegador (zoom da plataforma). */
  touch-action: pan-x pan-y;
}

.pdfv-paginas {
  box-sizing: border-box;
  min-width: 100%;
  padding: 12px 12px 72px;
}

.pdfv-pagina {
  position: relative;
  margin: 0 auto 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.pdfv-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Destaque passageiro no começo da questão */
.pdfv-marca {
  position: absolute;
  border-radius: 4px;
  background: rgba(255, 196, 0, 0.28);
  box-shadow: inset 4px 0 0 rgba(230, 150, 0, 0.9);
  pointer-events: none;
  animation: pdfv-sumir 3.5s ease-out forwards;
}

@keyframes pdfv-sumir {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

.pdfv-aviso {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--ink-primary);
  text-align: center;
  box-shadow: var(--shadow-md);
}

/* Recado passageiro: embaixo da barra no computador, em cima dela no celular. */
.pdfv-nota {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(440px, calc(100% - 32px));
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--ink-primary);
  font-size: 0.8125rem;
  line-height: 1.4;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

@media (max-width: 768px) {
  .pdfv-nota {
    top: auto;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* Barra flutuante, pequena e translúcida, no canto de cima: não cobre o texto nem impede rolar o PDF. */
.pdfv-barra {
  position: absolute;
  top: 10px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-md);
}

.pdfv-indicador {
  padding: 0 6px 0 8px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.pdfv-indicador:empty { display: none; }

.pdfv-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-primary);
}

.pdfv-btn:hover:not(:disabled),
.pdfv-btn:focus-visible { background: var(--bg-subtle); }

.pdfv-zoom .pdfv-btn-texto { font-size: 1.1rem; font-weight: 700; line-height: 1; }

.pdfv-fechar { background: var(--accent); color: var(--on-accent); }
.pdfv-fechar:hover:not(:disabled) { background: var(--accent-hover); }

@media (max-width: 768px) {
  .modal-pdf {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .pdfv-paginas { padding: 8px 8px 72px; }

  /* No celular a barra vai para baixo, ao alcance do polegar. */
  .pdfv-barra {
    top: auto;
    right: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(50%);
  }

  .pdfv-btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdfv-marca { animation-duration: 6s; }
}

.pdfv-area:focus { outline: none; }

/* ---------- Animações (splash, respostas, ondas nos botões, espera da IA, rosca do desempenho) ----------
   Poucas e curtas: aparecem em momentos que contam (entrar, acertar, esperar) e somem. Todas usam as cores do
   tema ativo (--accent, --ok, --danger), então combinam com qualquer paleta e com o modo escuro. */

/* Borda neon que corre (logo da splash, espera da IA): um feixe em gradiente cônico gira atrás do conteúdo, e só a
   faixa da borda (o padding) aparece. O feixe é um quadrado bem maior que a moldura, por isso acelera nos cantos,
   como uma luz que corre pela borda. As duas cores vêm da paleta ativa: o acento e o acento girado no círculo de cores
   (oklch relativo), então combinam com qualquer tema; navegador sem oklch relativo fica com o acento e o hover. */
.neon {
  --neon-borda: 2px;
  --neon-cor-1: var(--accent);
  --neon-cor-2: var(--accent-hover);
  --neon-volta: 4s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--neon-borda);
  border-radius: 1rem;
  background: var(--border-soft);
}
@supports (color: oklch(from red l c h)) {
  .neon { --neon-cor-2: oklch(from var(--accent) calc(l + 0.06) c calc(h + 70)); }
}
.neon-runner {
  position: absolute;
  inset: -150%;
  background: conic-gradient(from 0deg, transparent 0deg 280deg, var(--neon-cor-1) 330deg, var(--neon-cor-2) 360deg);
  animation: neon-gira var(--neon-volta) linear infinite;
  pointer-events: none;
}
.neon-conteudo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: calc(1rem - var(--neon-borda));
  background: var(--bg-surface);
}
.neon-redondo, .neon-redondo .neon-conteudo { border-radius: 50%; }
@keyframes neon-gira { to { transform: rotate(360deg); } }

/* Splash: logo grande numa moldura com a borda neon */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-page);
}
html.com-splash .splash { display: flex; }
html.com-splash body { overflow: hidden; }
/* Enquanto a splash está na tela, ela é o único sinal de espera: o círculo da busca não aparece por cima. */
html.com-splash .carregando { display: none; }
.splash.saindo { animation: splash-sai 0.42s ease forwards; }

.splash-moldura.neon {
  --neon-borda: 2px;
  --neon-volta: 3s;
  width: 184px;
  height: 184px;
  margin-bottom: 14px;
  border-radius: 40px;
  box-shadow: var(--shadow-md);
  animation: splash-entra 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.splash-moldura .neon-conteudo { border-radius: 38px; }
.splash-logo {
  width: 128px;
  height: 128px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));
}
.splash-titulo {
  font-size: 1.625rem;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  animation: splash-texto 0.6s 0.12s ease both;
}
.splash-texto {
  font-size: 0.875rem;
  color: var(--ink-muted);
  animation: splash-texto 0.6s 0.2s ease both;
}
@keyframes splash-entra { from { opacity: 0; transform: scale(0.9); } }
@keyframes splash-texto { from { opacity: 0; transform: translateY(6px); } }
@keyframes splash-sai { to { opacity: 0; transform: scale(1.03); visibility: hidden; } }

/* Onda no toque dos botões principais */
.com-onda { overflow: hidden; }
.onda-toque {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  pointer-events: none;
  transform: scale(0);
  animation: onda-toque 0.55s ease-out forwards;
}
@keyframes onda-toque { to { transform: scale(1); opacity: 0; } }

/* Resposta certa: uma onda verde parte da letra e atravessa a alternativa; o ícone do aviso dá um pulo. */
.qc-alt-linha.onda-acerto { position: relative; overflow: hidden; }
.qc-alt-linha.onda-acerto::after {
  content: '';
  position: absolute;
  left: var(--ox, 50px);
  top: var(--oy, 50%);
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: var(--ok);
  pointer-events: none;
  animation: onda-acerto 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes onda-acerto {
  from { transform: scale(0); opacity: 0.35; }
  to { transform: scale(22); opacity: 0; }
}
.qc-alt-linha.onda-acerto .qc-alt-letra { animation: letra-acerto 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes letra-acerto { 40% { transform: scale(1.22); } }
.qc-feedback.animar.acertou > svg:first-child { animation: letra-acerto 0.5s 0.1s cubic-bezier(0.3, 1.6, 0.5, 1); }
.qc-feedback.animar { animation: feedback-entra 0.3s ease both; }
@keyframes feedback-entra { from { opacity: 0; transform: translateY(-4px); } }

/* Resposta errada: um balanço curto na alternativa marcada, sem drama. */
.qc-alt-linha.balanco-erro { animation: balanco-erro 0.36s ease; }
@keyframes balanco-erro {
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

/* Espera da explicação por IA: a mesma borda neon em volta do ícone, como uma barra de progresso sem fim */
.qc-ia-neon.neon {
  --neon-borda: 2px;
  --neon-volta: 1.6s;
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--accent);
}
.qc-ia-carregando { align-items: center; }
.qc-ia-carregando-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qc-ia-carregando-tempo { font-size: 0.8125rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Rosca do desempenho: o aproveitamento enche o miolo como um líquido e a onda corre algumas vezes */
.pizza-liquido { animation: pizza-sobe 1.4s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
.pizza-onda {
  fill: var(--pizza-certas);
  opacity: 0.16;
  animation: pizza-onda 2.6s linear 4;
}
.pizza-onda.atras { opacity: 0.1; animation-duration: 3.6s; animation-direction: reverse; }
@keyframes pizza-sobe { from { transform: translateY(124px); } }
@keyframes pizza-onda { to { transform: translateX(-60px); } }

@media (prefers-reduced-motion: reduce) {
  .splash-moldura, .splash-titulo, .splash-texto, .splash.saindo { animation-duration: 0.01s; }
  .neon-runner { animation: neon-gira 12s linear infinite; }
  .onda-toque, .qc-alt-linha.onda-acerto::after { display: none; }
  .qc-alt-linha.onda-acerto .qc-alt-letra, .qc-feedback.animar, .qc-feedback.animar > svg,
  .qc-alt-linha.balanco-erro, .pizza-liquido, .pizza-onda { animation: none; }
}

/* ---------- Início: página limpa ao voltar depois de um tempo (montarInicio em app.js) ---------- */
.painel-inicio {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  animation: feedback-entra 0.3s ease both;
}
.painel-inicio[hidden] { display: none; }
.inicio-titulo { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; }

.inicio-sequencia {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
}
.inicio-seq-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inicio-seq-icone {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  color: var(--ink-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
}
.inicio-sequencia.feito .inicio-seq-icone { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 40%, transparent); }
.inicio-seq-numeros { display: flex; flex-direction: column; min-width: 0; }
.inicio-seq-numeros strong { font-size: 1.0625rem; }
.inicio-seq-numeros span { font-size: 0.8125rem; color: var(--ink-secondary); }
.inicio-semana {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inicio-semana li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.inicio-dia-marca {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px dashed var(--border-strong);
  color: var(--on-accent);
}
.inicio-semana li.estudou .inicio-dia-marca { border: 0; background: var(--accent); }
.inicio-semana li.hoje .inicio-dia-marca { box-shadow: 0 0 0 2px var(--bg-subtle), 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); }
.inicio-dia-letra { font-size: 0.6875rem; font-weight: 600; color: var(--ink-muted); }
.inicio-semana li.hoje .inicio-dia-letra { color: var(--accent); }
.inicio-recado { grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; color: var(--ink-secondary); }

.inicio-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg-surface));
}
.inicio-cartao-texto { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.inicio-cartao-texto .nota { margin: 0; }
.inicio-rotulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); font-size: 0.875rem; }
.inicio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inicio-cartao .btn-primario { flex: none; min-height: 2.75rem; }
.inicio-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.inicio-dica { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 0.8125rem; color: var(--ink-secondary); }
.inicio-dica .icone { color: var(--ambar); flex: none; margin-top: 1px; }
.inicio-filtros-nota { margin: 0; }

@media (max-width: 768px) {
  .painel-inicio { padding: 16px; gap: 12px; }
  .inicio-sequencia { grid-template-columns: 1fr; }
  .inicio-semana { justify-content: space-between; }
  .inicio-cartao { flex-direction: column; align-items: stretch; }
  .inicio-cartao .btn-primario { width: 100%; justify-content: center; }
  .inicio-atalhos .btn-curto { flex: 1 1 auto; justify-content: center; min-height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .painel-inicio { animation: none; } }

/* ---------- Plano Pro: selo, linhas discretas, convite e preferências (módulo "Plano" em app.js) ---------- */
.selo-pro {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  vertical-align: 0.1em;
  white-space: nowrap;
}
.selo-pro .icone { opacity: 1; width: 0.95em; height: 0.95em; }

.inicio-meta { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.inicio-meta-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 0.8125rem; color: var(--ink-secondary); }
.inicio-meta-linha .icone { color: var(--accent); }
.inicio-gratis { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.inicio-meta-barra { height: 6px; border-radius: 3px; background: var(--border-soft); overflow: hidden; }
.inicio-meta-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.6s ease; }
.inicio-meta-barra.cheia > span { background: var(--ok); }
.inicio-semana li.folga .inicio-dia-marca { border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); background: var(--accent-soft); }

/* Linha do Pro: uma frase, sem caixa chamativa; o toque abre o convite */
.inicio-linha-pro {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.inicio-linha-pro > span:not(.selo-pro) { flex: 1; }
.inicio-linha-pro:hover > span:not(.selo-pro) { color: var(--ink-primary); text-decoration: underline; text-underline-offset: 2px; }
.painel-inicio > .inicio-linha-pro { padding: 0 2px; }

.inicio-revisao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  color: var(--ink-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.inicio-revisao > .icone:first-child { color: var(--accent); }
.inicio-revisao > span { flex: 1; display: flex; flex-direction: column; }
.inicio-revisao small { color: var(--ink-secondary); font-size: 0.8125rem; }
.inicio-revisao:hover { border-color: var(--accent); }

/* Convite do Pro */
.modal-pro {
  width: min(30rem, calc(100vw - 32px));
  max-height: min(46rem, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--ink-primary);
  box-shadow: var(--shadow-md);
  overflow: auto;
}
.modal-pro::backdrop { background: rgba(10, 14, 20, 0.5); }
.modal-pro[open] { animation: feedback-entra 0.25s ease both; }
.pro-topo { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 8px; }
.pro-topo h2 { margin: 0 0 4px; font-size: 1.125rem; line-height: 1.3; }
.pro-topo p { margin: 0; color: var(--ink-secondary); font-size: 0.875rem; line-height: 1.5; }
.pro-topo > div { flex: 1; min-width: 0; }
.pro-topo-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
}
.pro-fechar { flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%; justify-content: center; margin: -4px -6px 0 0; }
.pro-corpo { display: flex; flex-direction: column; gap: 14px; padding: 8px 20px 4px; }
.pro-vantagens { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pro-vantagens li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; }
.pro-vantagens li > .icone { flex: none; margin-top: 2px; color: var(--ok); }
.pro-vantagens li > span { display: flex; flex-direction: column; }
.pro-vantagens small { color: var(--ink-muted); font-size: 0.8125rem; }
.pro-base { margin: 0; }
.pro-oferta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg-surface));
}
.pro-preco { display: flex; flex-direction: column; gap: 2px; }
.pro-preco-rotulo { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.pro-preco-valor { font-size: 1rem; }
.pro-preco-valor s { color: var(--ink-muted); }
.pro-preco-valor strong { font-size: 1.5rem; }
.pro-preco-sub { font-size: 0.8125rem; color: var(--ink-secondary); }
.pro-vagas { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink-primary); }
.pro-vagas .icone { color: var(--ambar); }
.pro-cta { justify-content: center; min-height: 2.75rem; }
.pro-garantia { display: flex; gap: 6px; margin: 0; font-size: 0.75rem; color: var(--ink-muted); line-height: 1.45; }
.pro-garantia .icone { flex: none; margin-top: 2px; opacity: 1; }
.pro-na-lista-titulo { display: flex; gap: 6px; margin: 0; font-weight: 600; }
.pro-na-lista-titulo .icone { color: var(--ok); flex: none; margin-top: 2px; }
.pro-na-lista .nota { margin: 0; }
.pro-sair-lista { align-self: flex-start; font-size: 0.8125rem; }
.pro-rodape { display: flex; justify-content: flex-end; padding: 12px 20px 18px; }
@media (max-width: 768px) {
  .modal-pro { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .modal-pro[open] { animation: folha-sobe 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pro-topo, .pro-corpo { padding-left: 16px; padding-right: 16px; }
  .pro-rodape { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
  .pro-rodape .sec { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .modal-pro[open] { animation: none; } }

/* Minha Conta: plano e estudo */
.dash-conta-plano { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.dash-conta-plano h4 { margin: 0; }
.dash-conta-plano .nota { margin: 0; }
.pref-campo { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; }
.pref-rotulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pref-campo.travado { cursor: pointer; }
.pref-campo.travado select { pointer-events: none; opacity: 0.6; }
.dash-conta-plano .btn-sm { align-self: flex-start; }

/* ---------- Provas em PDF ---------- */
.pdfs-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.pdfs-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1 1 140px;
}
.pdfs-campo-texto { flex: 2 1 240px; }
.pdfs-campo > span { font-size: 0.85rem; font-weight: 600; }
.pdfs-campo select,
.pdfs-campo input { width: 100%; min-width: 0; }
.pdfs-lista { display: flex; flex-direction: column; }
.pdfs-cartao { display: flex; flex-direction: column; gap: 6px; }
.pdfs-cartao .pdfs-titulo { margin: 0; font-size: 1rem; line-height: 1.35; }
.pdfs-cartao .nota { margin: 0; }
.pdfs-disciplinas { overflow-wrap: anywhere; }
.pdfs-aviso { font-style: italic; }
.pdfs-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pdfs-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 24px;
}
.pdfs-vazio { padding: 24px 0; text-align: center; }
@media (max-width: 680px) {
  .pdfs-acoes > button { flex: 1 1 100%; justify-content: center; }
}

/* "Filtro salvo" no cabeçalho do painel: campo digitável compacto, do tamanho do select que substituiu. */
.filtros-acoes-topo .combo { width: 180px; max-width: 100%; }
.filtros-acoes-topo .combo-input { padding-top: 4px; padding-bottom: 4px; }
.filtros-acoes-topo .combo-lista { min-width: 240px; }