/* =========================================================================
   Aprova — folha de estilo única.
   Princípio de projeto: leitura longa sem cansaço.
   - nenhum branco puro e nenhum preto puro em superfície grande;
   - contraste alto o bastante para AA, mas sem estourar luminância;
   - sombras substituídas por linhas de 1px (borda "hairline");
   - enunciado em serifa, com entrelinha 1.8 e coluna curta.
   ========================================================================= */

:root {
  --papel:        #f4f2ec;
  --papel-alto:   #fbfaf6;
  --papel-fundo:  #ecE9e1;
  --tinta:        #2c2a26;
  --tinta-media:  #5c584f;
  --tinta-fraca:  #8b8579;
  --linha:        #e0dbd0;
  --linha-forte:  #cec8ba;

  --verde:        #3d7a6b;
  --verde-forte:  #2f6053;
  --verde-tenue:  #e6efeb;
  --vermelho:     #a9503c;
  --vermelho-tenue:#f6e9e5;
  --ambar:        #a2761f;
  --ambar-tenue:  #f7efdd;
  --azul:         #3a6689;

  --raio:   10px;
  --raio-g: 14px;
  --gap:    18px;
  --largura: 1180px;

  --fonte-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
              Arial, sans-serif;
  --fonte-leitura: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  color-scheme: light;
}

html[data-tema="escuro"] {
  --papel:        #1b1c1d;
  --papel-alto:   #212324;
  --papel-fundo:  #141516;
  --tinta:        #ddd8cd;
  --tinta-media:  #a8a29a;
  --tinta-fraca:  #7b766e;
  --linha:        #323434;
  --linha-forte:  #434544;

  --verde:        #6da893;
  --verde-forte:  #86c0aa;
  --verde-tenue:  #22302c;
  --vermelho:     #cd7a63;
  --vermelho-tenue:#31221f;
  --ambar:        #c99f4d;
  --ambar-tenue:  #302819;
  --azul:         #7ea6c8;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* .btn e .alternativa definem display, o que venceria o display:none padrão do
   atributo hidden. Sem esta regra, "Próxima" aparece antes de a questão ser
   respondida. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papel-fundo);
  color: var(--tinta);
  font-family: var(--fonte-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
p  { margin: 0 0 0.6em; }
a  { color: var(--verde-forte); text-decoration: none; }
a:hover { text-decoration: underline; }

.dica  { display: block; font-size: 0.8rem; color: var(--tinta-fraca); }
.sub   { color: var(--tinta-media); max-width: 70ch; }
.bom   { color: var(--verde-forte); }
.ruim  { color: var(--vermelho); }
.num   { text-align: right; font-variant-numeric: tabular-nums; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- topo */

.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 30;
}
.topo-interno, .trilha-interna, .conteudo {
  max-width: var(--largura); margin: 0 auto; padding: 0 22px;
}
.topo-interno {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
}
.marca {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--verde); font-weight: 650; font-size: 1.05rem;
  letter-spacing: -0.02em; text-decoration: none;
}
.marca span { color: var(--tinta); }
.marca-grande { font-size: 1.35rem; margin-bottom: 26px; }

.topo-direita { display: flex; align-items: center; gap: 14px; }
.sino {
  position: relative; color: var(--tinta-media); display: inline-flex;
  padding: 6px; border-radius: 8px;
}
.sino:hover { background: var(--papel-fundo); }
.sino.tem-nova { color: var(--ambar); }
.contador {
  position: absolute; top: 0; right: 0; min-width: 15px; height: 15px;
  background: var(--vermelho); color: #fff; border-radius: 8px;
  font-size: 0.62rem; line-height: 15px; text-align: center; padding: 0 3px;
  font-weight: 600;
}
.usuario { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); }
.usuario:hover { text-decoration: none; }
.usuario-nome { font-size: 0.85rem; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--verde-tenue); color: var(--verde-forte);
  display: grid; place-items: center; font-weight: 650; font-size: 0.78rem;
  border: 1px solid var(--linha);
}
.em-linha { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.btn-texto {
  background: none; border: 0; color: var(--tinta-fraca); cursor: pointer;
  font-size: 0.82rem; font-family: inherit; padding: 4px;
}
.btn-texto:hover { color: var(--tinta); text-decoration: underline; }

/* botão claro/escuro: mostra a lua no modo claro e o sol no escuro */
.btn-tema {
  background: none; border: 0; color: var(--tinta-media); cursor: pointer;
  display: inline-flex; padding: 6px; border-radius: 8px;
}
.btn-tema:hover { background: var(--papel-fundo); color: var(--tinta); }
.icone-sol { display: none; }
html[data-tema="escuro"] .icone-sol { display: block; }
html[data-tema="escuro"] .icone-lua { display: none; }
.canto-portao { position: absolute; top: 14px; right: 16px; z-index: 5; }

/* No escuro, os verdes e o vermelho ficam claros (para brilhar pouco sobre o fundo
   escuro) — letra branca por cima deles fica apagada. Troca por letra escura. */
html[data-tema="escuro"] .btn-principal,
html[data-tema="escuro"] .btn-perigo,
html[data-tema="escuro"] .hoje-etiqueta,
html[data-tema="escuro"] .alternativa.selecionada .letra,
html[data-tema="escuro"] .alternativa.correta .letra,
html[data-tema="escuro"] .alternativa.marcada-errada .letra { color: var(--papel-fundo); }
html[data-tema="escuro"] .btn-principal:disabled { color: var(--tinta-fraca); }

/* barra de seções do celular (escondida no computador) */
.barra-inferior { display: none; }

.trilha { background: var(--papel); border-top: 1px solid var(--linha); }
.trilha-interna { display: flex; gap: 4px; overflow-x: auto; }
.aba {
  padding: 9px 13px; font-size: 0.87rem; color: var(--tinta-media);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.aba:hover { color: var(--tinta); text-decoration: none; }
.aba.ativa { color: var(--verde-forte); border-bottom-color: var(--verde); font-weight: 600; }

.conteudo { padding-top: 26px; padding-bottom: 48px; }
.rodape {
  border-top: 1px solid var(--linha); padding: 18px 22px;
  text-align: center; color: var(--tinta-fraca); font-size: 0.78rem;
}

/* ---------------------------------------------------------------- blocos */

.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 18px 20px;
}
.cabecalho-cartao {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.link-discreto { font-size: 0.8rem; color: var(--tinta-fraca); }
.link-discreto:hover { color: var(--verde-forte); }
.subtitulo { margin: 18px 0 8px; color: var(--tinta-media); }
.vazio { color: var(--tinta-fraca); font-size: 0.88rem; }
.vazio-grande { text-align: center; padding: 42px 24px; }
.vazio-grande p { color: var(--tinta-media); max-width: 52ch; margin: 8px auto 18px; }

.saudacao {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}

/* ---------------------------------------------------------------- botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--raio); border: 1px solid transparent;
  font: inherit; font-size: 0.88rem; font-weight: 550; cursor: pointer;
  text-decoration: none; transition: background .12s, border-color .12s;
}
.btn:hover { text-decoration: none; }
.btn-principal { background: var(--verde); color: #fff; }
.btn-principal:hover { background: var(--verde-forte); }
.btn-principal:disabled { background: var(--linha-forte); color: var(--tinta-fraca); cursor: not-allowed; }
.btn-secundario {
  background: var(--papel-alto); color: var(--tinta); border-color: var(--linha-forte);
}
.btn-secundario:hover { background: var(--papel); }
.btn-discreto {
  background: transparent; color: var(--tinta-media); border-color: var(--linha);
  font-size: 0.82rem; padding: 6px 11px;
}
.btn-discreto:hover { background: var(--papel); color: var(--tinta); }
.btn-largo { width: 100%; margin-top: 6px; }

/* ---------------------------------------------------------------- formulários */

.formulario label, .formulario-filtros label, .grade-perfil label {
  display: block; font-size: 0.8rem; font-weight: 600; color: var(--tinta-media);
  margin: 14px 0 5px;
}
.opcional { font-weight: 400; color: var(--tinta-fraca); }
input, select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 0.9rem;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 1px;
}
input:disabled { background: var(--papel-fundo); color: var(--tinta-fraca); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alternador {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 0.88rem; color: var(--tinta);
}
.alternador input { width: auto; }
.aviso {
  padding: 10px 13px; border-radius: var(--raio); font-size: 0.86rem;
  border: 1px solid; margin-bottom: 14px;
}
.aviso-erro { background: var(--vermelho-tenue); border-color: var(--vermelho); color: var(--vermelho); }
.aviso-ok   { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde-forte); }
.lista-erros { margin: 0; padding-left: 18px; }
.filtro-em-linha { display: flex; gap: 8px; align-items: center; }
.filtro-em-linha select { width: auto; min-width: 210px; }

/* ---------------------------------------------------------------- portão (login/cadastro) */

.corpo-portao { background: var(--papel-fundo); }
.portao {
  max-width: 1080px; margin: 0 auto; padding: 52px 22px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center;
  min-height: calc(100vh - 60px);
}
.portao-apresentacao h1 {
  font-family: var(--fonte-leitura); font-size: 2.05rem; line-height: 1.28;
  font-weight: 400; letter-spacing: -0.015em; margin-bottom: 16px;
}
.chamada { color: var(--tinta-media); max-width: 46ch; line-height: 1.72; }
.lista-beneficios { list-style: none; padding: 0; margin: 26px 0 0; }
.lista-beneficios li {
  display: flex; gap: 12px; align-items: flex-start; padding: 9px 0;
  border-top: 1px solid var(--linha); font-size: 0.88rem; color: var(--tinta-media);
}
.marcador {
  color: var(--verde); font-variant-numeric: tabular-nums; font-weight: 650;
  font-size: 0.78rem; padding-top: 2px;
}
.nota-portao {
  margin-top: 26px; padding: 14px 16px; border-left: 3px solid var(--verde);
  background: var(--verde-tenue); border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 0.85rem; color: var(--tinta-media); line-height: 1.68;
}
.cartao-portao { padding: 30px 30px 26px; }
.cartao-portao h2 { font-size: 1.3rem; }
.cartao-portao .sub { margin: 4px 0 20px; font-size: 0.88rem; }
.rodape-cartao {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--linha);
  font-size: 0.85rem; color: var(--tinta-media); text-align: center;
}
.rodape-portao { border: 0; }

/* ---------------------------------------------------------------- gamificação */

.faixa-jogo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--gap); margin-bottom: var(--gap);
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--raio-g); padding: 18px 20px;
}
.jogo-nivel, .jogo-item { display: flex; align-items: center; gap: 14px; }
.jogo-item .emoji { font-size: 1.5rem; line-height: 1; }
.jogo-nivel .rotulo, .jogo-item .rotulo, .indicador .rotulo {
  display: block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tinta-fraca); font-weight: 600;
}
.jogo-nivel strong, .jogo-item strong { font-size: 1.12rem; display: block; }
.nivel-circulo {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid;
  place-items: center; position: relative;
  background: conic-gradient(var(--verde) calc(var(--pct) * 1%), var(--linha) 0);
}
.nivel-circulo::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--papel-alto);
}
.nivel-numero {
  position: relative; z-index: 1; font-weight: 700; font-size: 1.05rem;
  color: var(--verde-forte);
}
.barra-meta {
  height: 5px; background: var(--linha); border-radius: 3px; margin-top: 6px;
  overflow: hidden; width: 130px;
}
.barra-meta span { display: block; height: 100%; background: var(--verde); border-radius: 3px; }

/* ---------------------------------------------------------------- indicadores */

.grade-indicadores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--gap); margin-bottom: var(--gap);
}
.indicador {
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--raio-g); padding: 15px 17px;
}
.indicador strong {
  display: block; font-size: 1.62rem; font-weight: 600; margin: 3px 0 2px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.indicador.bom strong  { color: var(--verde-forte); }
.indicador.ruim strong { color: var(--vermelho); }

/* ---------------------------------------------------------------- gráficos */

.grade-graficos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin-bottom: var(--gap);
}
.cartao-grafico.grande { grid-column: span 2; }
.area-grafico { width: 100%; position: relative; }
.area-grafico.rolavel { overflow-x: auto; padding-bottom: 4px; }
.area-grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
/* a rosca e o mapa têm proporção fixa: sem teto, esticam demais em coluna única */
[data-grafico="rosca"] svg { max-width: 400px; margin: 0 auto; }
[data-grafico="mapa"] svg  { max-width: 460px; }
.nota-grafico { font-size: 0.76rem; color: var(--tinta-fraca); margin: 10px 0 0; }
.legenda { display: flex; gap: 14px; font-size: 0.76rem; color: var(--tinta-fraca); }
.chave { display: inline-flex; align-items: center; gap: 5px; }
.chave::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--verde);
}
.chave-taxa::before { background: var(--ambar); border-radius: 50%; }

.dica-flutuante {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--tinta); color: var(--papel-alto);
  padding: 7px 10px; border-radius: 7px; font-size: 0.76rem; line-height: 1.45;
  white-space: nowrap; transform: translate(-50%, -120%); opacity: 0;
  transition: opacity .1s;
}
.dica-flutuante.visivel { opacity: 1; }
.dica-flutuante b { font-weight: 650; }

.g-eixo      { stroke: var(--linha); stroke-width: 1; }
.g-grade     { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 2 4; }
.g-rotulo    { fill: var(--tinta-fraca); font-size: 10px; font-family: var(--fonte-ui); }
.g-valor     { fill: var(--tinta-media); font-size: 10px; font-family: var(--fonte-ui);
               font-variant-numeric: tabular-nums; }
.g-barra     { fill: var(--verde); }
.g-barra-fraca { fill: var(--vermelho); }
.g-barra-media { fill: var(--ambar); }
.g-trilho    { fill: var(--linha); }
.g-linha     { fill: none; stroke: var(--ambar); stroke-width: 2;
               stroke-linejoin: round; stroke-linecap: round; }
.g-area      { fill: var(--verde); opacity: .1; }
.g-ponto     { fill: var(--ambar); }
.g-alvo      { cursor: pointer; }
.g-alvo:hover .g-barra, .g-alvo:hover .g-barra-fraca, .g-alvo:hover .g-barra-media {
  opacity: .78;
}
.g-realce    { fill: var(--verde); opacity: 0; }
.g-alvo:hover .g-realce { opacity: .09; }

.celula-mapa { rx: 2; }
.mapa-n0 { fill: var(--linha); }
.mapa-n1 { fill: var(--verde); opacity: .28; }
.mapa-n2 { fill: var(--verde); opacity: .5; }
.mapa-n3 { fill: var(--verde); opacity: .74; }
.mapa-n4 { fill: var(--verde); opacity: 1; }

/* ---------------------------------------------------------------- listas */

.grade-listas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: var(--gap); margin-bottom: var(--gap); align-items: start;
}
.lista-blocos { list-style: none; margin: 0; padding: 0; }
.bloco {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--linha);
}
.bloco:first-child { border-top: 0; }
.bloco .bloco-corpo, .bloco > div:first-of-type { flex: 1; min-width: 0; }
.bloco strong { display: block; font-size: 0.92rem; }
.bloco .motivo { display: block; font-size: 0.76rem; color: var(--tinta-fraca); font-style: italic; }
.bloco.feito { opacity: .5; }
.bloco.feito strong { text-decoration: line-through; }
.bloco.prioridade-1 { border-left: 3px solid var(--vermelho); padding-left: 11px; }
.bloco.prioridade-2 { border-left: 3px solid var(--ambar); padding-left: 11px; }
.bloco.prioridade-3 { border-left: 3px solid var(--linha-forte); padding-left: 11px; }

.marcador-bloco { display: inline-flex; cursor: pointer; }
.marcador-bloco input { position: absolute; opacity: 0; width: 0; height: 0; }
.marcador-bloco .caixa {
  width: 19px; height: 19px; border: 1.5px solid var(--linha-forte);
  border-radius: 5px; display: block; position: relative;
}
.marcador-bloco input:checked + .caixa {
  background: var(--verde); border-color: var(--verde);
}
.marcador-bloco input:checked + .caixa::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.marcador-bloco input:focus-visible + .caixa { outline: 2px solid var(--verde); outline-offset: 2px; }
.rotulo-oculto { display: none; }

.lista-desempenho { list-style: none; margin: 0; padding: 0; }
.lista-desempenho li { padding: 11px 0; border-top: 1px solid var(--linha); }
.lista-desempenho li:first-child { border-top: 0; }
.linha-superior {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.linha-superior .nome { font-size: 0.9rem; font-weight: 550; }
.taxa { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 0.88rem; }
.barra {
  height: 6px; background: var(--linha); border-radius: 3px; margin: 6px 0 5px;
  overflow: hidden;
}
.barra span { display: block; height: 100%; background: var(--vermelho); border-radius: 3px; }
.barra .preenche-bom  { background: var(--verde); }
.barra .preenche-ruim { background: var(--vermelho); }
.barra-tabela { margin: 0; width: 90px; }
.barra-tabela span { background: var(--ambar); }

.lista-etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; }
.etiqueta {
  display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 0.74rem;
  background: var(--papel-fundo); color: var(--tinta-media); border: 1px solid var(--linha);
}
.etiqueta.suave { color: var(--tinta-fraca); }
.etiqueta.boa   { background: var(--verde-tenue); color: var(--verde-forte); border-color: var(--verde); }
.etiqueta.severa{ background: var(--vermelho-tenue); color: var(--vermelho); border-color: var(--vermelho); }
.etiqueta.dif-facil   { background: var(--verde-tenue); color: var(--verde-forte); }
.etiqueta.dif-media   { background: var(--ambar-tenue); color: var(--ambar); }
.etiqueta.dif-dificil { background: var(--vermelho-tenue); color: var(--vermelho); }
.hoje-etiqueta { background: var(--verde); color: #fff; border-color: var(--verde); }

.placar { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.placar li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 10px;
  align-items: center; padding: 9px 0; border-top: 1px solid var(--linha);
}
.placar li:first-child { border-top: 0; }
.placar .posicao {
  font-variant-numeric: tabular-nums; color: var(--tinta-fraca); font-weight: 650;
  font-size: 0.85rem;
}
.placar .nome { font-size: 0.9rem; }
.placar .dica { grid-column: 2; margin-top: -3px; }
.placar .xp {
  grid-row: 1 / span 2; font-variant-numeric: tabular-nums; font-weight: 650;
  font-size: 0.88rem; color: var(--verde-forte);
}
.placar li.eu { background: var(--verde-tenue); border-radius: var(--raio); padding: 9px 10px; }

.lista-reincidentes { list-style: none; margin: 0; padding: 0; }
.lista-reincidentes li {
  display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha);
}
.lista-reincidentes li:first-child { border-top: 0; }
.trecho {
  font-family: var(--fonte-leitura); font-size: 0.84rem; color: var(--tinta-media);
  margin: 5px 0 0; line-height: 1.6;
}

.lista-dados { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.lista-dados dt { color: var(--tinta-fraca); font-size: 0.82rem; }
.lista-dados dd { margin: 0; font-weight: 550; font-size: 0.9rem; }

.lista-patentes { list-style: none; margin: 0; padding: 0; }
.lista-patentes li {
  display: flex; align-items: center; gap: 11px; padding: 7px 0;
  border-top: 1px solid var(--linha); color: var(--tinta-fraca); font-size: 0.87rem;
}
.lista-patentes li:first-child { border-top: 0; }
.lista-patentes li.alcancada { color: var(--tinta); }
.lista-patentes li.alcancada .nome { font-weight: 600; }
.nivel-min {
  font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--tinta-fraca);
  width: 38px;
}

/* ---------------------------------------------------------------- tabela */

.tabela-rolavel { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tabela th {
  text-align: left; font-weight: 600; color: var(--tinta-fraca); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px;
  border-bottom: 1px solid var(--linha-forte); white-space: nowrap;
}
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--linha); }
.tabela tbody tr:hover { background: var(--papel); }

/* ---------------------------------------------------------------- praticar */

/* fichas de seleção rápida por edital, no topo da tela de praticar */
.trilhos-concurso { margin-bottom: var(--gap); }
.rotulo-trilho {
  display: block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tinta-fraca); font-weight: 600;
  margin-bottom: 8px;
}
.trilho-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px;
}
.ficha-concurso {
  display: block; padding: 12px 14px; border: 1px solid var(--linha);
  border-radius: var(--raio-g); background: var(--papel-alto); color: var(--tinta);
  transition: border-color .12s, background .12s;
}
.ficha-concurso:hover { border-color: var(--linha-forte); background: var(--papel); text-decoration: none; }
.ficha-concurso.ativa { border-color: var(--verde); background: var(--verde-tenue); }
.ficha-concurso strong { display: block; font-size: 0.95rem; }
.ficha-concurso .dica { margin-top: 1px; }
.contagem-ficha {
  display: block; margin-top: 6px; font-size: 0.72rem; color: var(--verde-forte);
  font-weight: 600;
}

.painel-filtros {
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--raio-g); margin-bottom: var(--gap); padding: 0 20px;
}
.painel-filtros summary {
  cursor: pointer; padding: 14px 0; display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap; font-weight: 600; font-size: 0.92rem; list-style: none;
}
.painel-filtros summary::-webkit-details-marker { display: none; }
.painel-filtros summary::before {
  content: "▸"; color: var(--tinta-fraca); transition: transform .15s; display: inline-block;
}
.painel-filtros[open] summary::before { transform: rotate(90deg); }
.painel-filtros summary .dica { display: inline; font-weight: 400; }
.formulario-filtros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; align-items: end; padding-bottom: 20px;
  border-top: 1px solid var(--linha); padding-top: 4px;
}
.formulario-filtros label { margin-top: 10px; }
.formulario-filtros .btn { height: 38px; }

.sessao-barra {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.progresso-sessao { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 12px; }
.contagem {
  font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--tinta-fraca);
  white-space: nowrap;
}
.barra-sessao {
  flex: 1; height: 4px; background: var(--linha); border-radius: 2px; overflow: hidden;
}
.barra-sessao span {
  display: block; height: 100%; width: 0; background: var(--verde);
  transition: width .25s ease;
}
.placar-sessao { display: flex; gap: 14px; font-size: 0.82rem; color: var(--tinta-media); }
.placar-item b { font-variant-numeric: tabular-nums; }
.placar-item.bom  { color: var(--verde-forte); }
.placar-item.ruim { color: var(--vermelho); }
.cronometro { font-variant-numeric: tabular-nums; color: var(--tinta-fraca); }

.cartao-questao { padding: 22px 26px 20px; }
.cabecalho-questao {
  display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
  flex-wrap: wrap; margin-bottom: 16px;
}
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-marcar {
  background: none; border: 1px solid var(--linha); border-radius: 20px;
  padding: 4px 11px; font: inherit; font-size: 0.75rem; color: var(--tinta-fraca);
  cursor: pointer; white-space: nowrap;
}
.btn-marcar:hover { color: var(--ambar); border-color: var(--ambar); }
.btn-marcar.ativo { color: var(--ambar); border-color: var(--ambar); background: var(--ambar-tenue); }

.enunciado {
  font-family: var(--fonte-leitura); font-size: 1.02rem; line-height: 1.82;
  color: var(--tinta); max-width: 74ch; margin-bottom: 20px;
  white-space: pre-wrap;
}

.alternativas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alternativa {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); cursor: pointer; transition: border-color .12s, background .12s;
  max-width: 76ch; font-size: 0.92rem; line-height: 1.62;
}
.alternativas.estaticas .alternativa { cursor: default; }
.alternativa:hover { border-color: var(--linha-forte); background: var(--papel-fundo); }
.alternativa .letra {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--linha-forte); display: grid; place-items: center;
  font-size: 0.76rem; font-weight: 650; color: var(--tinta-media);
}
.alternativa .texto { flex: 1; }
.alternativa.selecionada {
  border-color: var(--verde); background: var(--verde-tenue);
}
.alternativa.selecionada .letra { background: var(--verde); color: #fff; border-color: var(--verde); }
.alternativa.correta {
  border-color: var(--verde); background: var(--verde-tenue);
}
.alternativa.correta .letra { background: var(--verde); color: #fff; border-color: var(--verde); }
.alternativa.marcada-errada {
  border-color: var(--vermelho); background: var(--vermelho-tenue);
}
.alternativa.marcada-errada .letra { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.alternativa.apagada { opacity: .55; }
.selo {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 650; align-self: center; white-space: nowrap;
}
.selo.bom  { color: var(--verde-forte); }
.selo.ruim { color: var(--vermelho); }

.retorno {
  margin-top: 20px; border-radius: var(--raio); border: 1px solid var(--linha);
  overflow: hidden;
}
.retorno-cabecalho {
  padding: 11px 16px; font-weight: 650; font-size: 0.92rem;
  display: flex; align-items: center; gap: 9px;
}
.retorno.acertou .retorno-cabecalho { background: var(--verde-tenue); color: var(--verde-forte); }
.retorno.errou   .retorno-cabecalho { background: var(--vermelho-tenue); color: var(--vermelho); }
.retorno-comentario {
  padding: 15px 16px; font-family: var(--fonte-leitura); font-size: 0.93rem;
  line-height: 1.78; color: var(--tinta-media); max-width: 76ch;
}
.acoes-questao {
  display: flex; gap: 10px; align-items: center; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--linha); flex-wrap: wrap;
}

.resumo-sessao { margin-top: var(--gap); }
.grade-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px; margin: 16px 0 20px;
}
.grade-resumo strong { display: block; font-size: 1.5rem; font-weight: 600; }
.grade-resumo .rotulo {
  display: block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tinta-fraca); font-weight: 600;
}
.acoes-resumo { display: flex; gap: 10px; flex-wrap: wrap; }

/* brindes de gamificação (toast) */
.pilha-brindes {
  position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px;
  z-index: 60; max-width: 310px;
}
.brinde {
  background: var(--papel-alto); border: 1px solid var(--verde);
  border-left-width: 4px; border-radius: var(--raio); padding: 12px 15px;
  display: flex; gap: 12px; align-items: flex-start;
  animation: entra .25s ease;
}
.brinde .icone { font-size: 1.4rem; line-height: 1; }
.brinde strong { display: block; font-size: 0.9rem; }
.brinde.saindo { opacity: 0; transform: translateX(12px); transition: all .3s; }
@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- erros */

.faixa-alerta { border-left: 4px solid var(--vermelho); margin-bottom: var(--gap); }
.faixa-alerta h2 { font-size: 0.95rem; margin-bottom: 10px; color: var(--vermelho); }
.lista-erros-detalhada { display: grid; gap: var(--gap); }
.cartao-erro { padding: 20px 24px; }
.comentario-recolhivel { margin-top: 16px; }
.comentario-recolhivel summary {
  cursor: pointer; font-size: 0.83rem; color: var(--verde-forte); font-weight: 600;
  padding: 6px 0;
}
.rodape-erro { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); }
.paginacao {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: var(--gap);
}

/* ---------------------------------------------------------------- cronograma */

.grade-legenda {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-bottom: var(--gap); font-size: 0.78rem; color: var(--tinta-fraca);
}
.chave-prioridade { display: inline-flex; align-items: center; gap: 6px; }
.chave-prioridade::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--linha-forte);
}
.chave-prioridade.p1::before { background: var(--vermelho); }
.chave-prioridade.p2::before { background: var(--ambar); }

.agenda {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap); margin-bottom: var(--gap);
}
.dia-agenda.hoje { border-color: var(--verde); }
.cabecalho-dia {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linha);
  flex-wrap: wrap;
}
.dia-semana {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tinta-fraca); font-weight: 650; margin-right: 7px;
}
.dia-data { font-size: 1.02rem; }

/* ---------------------------------------------------------------- conquistas */

.grade-conquistas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px;
}
.medalha {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px 14px; text-align: center; background: var(--papel);
}
.medalha .icone { font-size: 1.9rem; display: block; margin-bottom: 7px; }
.medalha strong { display: block; font-size: 0.88rem; margin-bottom: 4px; }
.medalha .em {
  display: block; margin-top: 9px; font-size: 0.7rem; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.medalha.obtida { border-color: var(--verde); background: var(--verde-tenue); }
.medalha.bloqueada { opacity: .5; }
.medalha.bloqueada .icone { filter: grayscale(1); }
.placar-grande li { padding: 12px 0; }

/* ---------------------------------------------------------------- notificações */

.lista-notificacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notificacao {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--raio-g); padding: 14px 17px;
}
.notificacao > div { flex: 1; }
.notificacao p { margin: 3px 0 5px; font-size: 0.87rem; color: var(--tinta-media); }
.notificacao .ponto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte);
  margin-top: 7px; flex: none;
}
.notificacao.nao-lida { border-color: var(--linha-forte); }
.notificacao.nao-lida .ponto { background: var(--verde); }
.notificacao.tipo-alerta .ponto  { background: var(--ambar); }
.notificacao.tipo-sucesso .ponto { background: var(--verde); }
.notificacao.tipo-meta .ponto    { background: var(--azul); }
.notificacao.lida, .notificacao:not(.nao-lida) { opacity: .68; }

.grade-perfil {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: start;
}
.cartao-perigo { margin-top: var(--gap); border-left: 4px solid var(--vermelho); }
.cartao-perigo h2 { color: var(--vermelho); }
.cartao-perigo .sub { margin-bottom: 12px; }
.formulario-perigo { max-width: 420px; }
.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-perigo:hover { filter: brightness(0.92); }

/* ---------------------------------------------------------------- plano de estudo */

.faixa-plano {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 12px 18px; margin-bottom: var(--gap); border-radius: var(--raio-g);
  background: var(--verde-tenue); border: 1px solid var(--verde); color: var(--tinta);
}
.faixa-plano:hover { text-decoration: none; filter: brightness(0.98); }
.faixa-plano-titulo { flex: 1 1 260px; font-size: 0.9rem; }
.faixa-plano-titulo strong { color: var(--verde-forte); margin-right: 6px; }
.faixa-plano-item { font-size: 0.84rem; color: var(--tinta-media); white-space: nowrap; }
.faixa-plano-convite { background: var(--papel-alto); border-style: dashed; }

.aviso-alerta { background: var(--ambar-tenue); border-color: var(--ambar); color: var(--tinta); }
.indicador strong.indicador-texto { font-size: 1.02rem; line-height: 1.35; margin: 6px 0 4px; }
.lista-simples { margin: 0; padding-left: 18px; }
.lista-simples li { margin: 4px 0; font-size: 0.9rem; color: var(--tinta-media); }
.lista-dados-simples { margin: 0 0 12px; padding-left: 18px; font-size: 0.88rem; color: var(--tinta-media); }
.lista-dados-simples li { margin: 4px 0; }
.cartao-opcao-plano .formulario { margin-top: 6px; }

.menu-plano { position: relative; }
.menu-plano > summary { list-style: none; }
.menu-plano > summary::-webkit-details-marker { display: none; }
.menu-plano-corpo {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 290px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.segmentos { display: flex; gap: 3px; margin: 6px 0 14px; border-radius: var(--raio); overflow: hidden; }
.segmento {
  padding: 6px 8px; font-size: 0.72rem; font-weight: 600; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.segmento-1 { background: var(--azul); }
.segmento-2 { background: var(--verde); }
.segmento-3 { background: var(--ambar); }
html[data-tema="escuro"] .segmento { color: var(--papel-fundo); }
.acoes-bloco { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.lista-marcos { list-style: none; margin: 0; padding: 0; }
.lista-marcos li {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--linha);
}
.lista-marcos li:first-child { border-top: 0; }
.lista-marcos strong { display: block; font-size: 0.9rem; }
.marco-data {
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--verde-forte);
  background: var(--verde-tenue); border-radius: 8px; padding: 6px 0; text-align: center;
  font-size: 0.82rem;
}

.grade-semana { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 8px; }
.dia-grade {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
}
.dia-grade.hoje { border-color: var(--verde); background: var(--verde-tenue); }
.dia-grade-nome { font-size: 0.82rem; }
.bloco-grade {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; font-size: 0.78rem;
  line-height: 1.35; border-radius: 7px; background: var(--papel-alto);
  border-left: 3px solid var(--linha-forte);
}
.bloco-grade.p1 { border-left-color: var(--vermelho); }
.bloco-grade.p2 { border-left-color: var(--ambar); }
.bloco-grade.extra { border-style: dashed; border-left-style: solid; opacity: .8; }
.bloco-grade.especial { border-left-color: var(--azul); }
.bloco-grade .dica { font-size: 0.68rem; }

.tabela-plano td { vertical-align: middle; }
.etiqueta.prio-max { background: var(--vermelho-tenue); color: var(--vermelho); border-color: var(--vermelho); }
.etiqueta.prio-alta { background: var(--ambar-tenue); color: var(--ambar); border-color: var(--ambar); }
.etiqueta.prio-media { background: var(--papel-fundo); }
.etiqueta.prio-manut { color: var(--tinta-fraca); }

.grade-fases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.fase {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio);
}
.fase.atual { border-color: var(--verde); background: var(--verde-tenue); }
.fase p { margin: 0; font-size: 0.86rem; color: var(--tinta-media); }
.fase .rotulo {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-fraca); font-weight: 600;
}

.lista-checklist { list-style: none; margin: 0; padding: 0; }
.lista-checklist li { padding: 2px 0; }
.lista-checklist .alternador { margin-top: 6px; align-items: flex-start; }
.lista-checklist .alternador input { margin-top: 4px; }
.lista-foco .comentario-recolhivel { margin-top: 4px; border-top: 1px solid var(--linha); }

/* ---------------------------------------------------------------- flashcards */

.grade-baralhos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
.baralho .barra { margin-top: 8px; }
.ficha-simulado { display: flex; flex-direction: column; gap: 4px; }
.ficha-simulado .btn { margin-top: 8px; align-self: flex-start; }

.flashcard { max-width: 760px; margin: 0 auto; padding: 22px 26px; }
.flashcard-frente {
  font-family: var(--fonte-leitura); font-size: 1.12rem; line-height: 1.75; margin: 14px 0;
  white-space: pre-wrap;
}
.flashcard-verso {
  font-family: var(--fonte-leitura); font-size: 1rem; line-height: 1.75; white-space: pre-wrap;
  padding: 14px 16px; border-radius: var(--raio); background: var(--verde-tenue);
  border-left: 3px solid var(--verde);
}
.acoes-flashcard { justify-content: center; }
.notas-flashcard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.btn-nota { flex-direction: column; gap: 0; border-color: var(--linha-forte); background: var(--papel-alto); color: var(--tinta); }
.btn-nota .dica { font-weight: 400; }
.btn-nota.errei { border-color: var(--vermelho); color: var(--vermelho); }
.btn-nota.dificil { border-color: var(--ambar); color: var(--ambar); }
.btn-nota.bom { border-color: var(--verde); color: var(--verde-forte); }
.btn-nota.facil { border-color: var(--azul); color: var(--azul); }
.btn-nota:hover { background: var(--papel); }
kbd {
  font-family: var(--fonte-ui); font-size: 0.68rem; padding: 1px 5px; border-radius: 4px;
  border: 1px solid currentColor; opacity: .65; margin-left: 4px;
}
.sessao-cartoes .sessao-barra { max-width: 760px; margin: 0 auto 14px; }

/* ---------------------------------------------------------------- foco (Pomodoro) */

.grade-foco { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.cartao-relogio { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cartao-relogio select { max-width: 360px; }
.modos-foco { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--papel-fundo); flex-wrap: wrap; justify-content: center; }
.modo-foco {
  border: 0; background: none; font: inherit; font-size: 0.84rem; padding: 7px 12px;
  border-radius: 9px; cursor: pointer; color: var(--tinta-media);
}
.modo-foco.ativo { background: var(--papel-alto); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.personalizar-foco { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 0.84rem; }
.personalizar-foco input { width: 64px; padding: 5px 7px; }
.rotulo-foco { font-size: 0.78rem; color: var(--tinta-fraca); font-weight: 600; margin-bottom: -6px; }
.relogio { position: relative; width: min(280px, 72vw); aspect-ratio: 1; }
.anel { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-fundo { fill: none; stroke: var(--linha); stroke-width: 10; }
.anel-progresso {
  fill: none; stroke: var(--verde); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset .5s linear;
}
.relogio.em-pausa .anel-progresso { stroke: var(--azul); }
.relogio-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
}
.etapa-nome { font-size: 0.9rem; font-weight: 600; color: var(--verde-forte); }
.relogio.em-pausa .etapa-nome { color: var(--azul); }
.tempo { font-size: 3.2rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.acoes-relogio { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.etapas-foco {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: center;
}
.etapas-foco li {
  font-size: 0.72rem; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--linha);
  color: var(--tinta-fraca);
}
.etapas-foco li.atual { border-color: var(--verde); color: var(--verde-forte); font-weight: 600; }
.etapas-foco li.feita { text-decoration: line-through; opacity: .6; }
.coluna-foco { display: grid; gap: var(--gap); }
.grade-resumo-foco { grid-template-columns: repeat(3, 1fr); margin: 4px 0 12px; }
.barras-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 90px; align-items: end; }
.barra-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.barra-dia-valor { width: 100%; min-height: 2px; background: var(--verde); border-radius: 4px 4px 0 0; }

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

.barra-simulado {
  position: sticky; top: 96px; z-index: 10; display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 10px 16px; margin-bottom: 14px; border-radius: var(--raio-g);
  background: var(--papel-alto); border: 1px solid var(--linha);
}
.barra-simulado .btn { margin-left: auto; }
.relogio-simulado { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.relogio-simulado.acabando { color: var(--vermelho); }
.grade-simulado { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--gap); align-items: start; }
.mapa-simulado h2 { font-size: 0.95rem; margin-bottom: 10px; }
.numeros-simulado { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; margin-bottom: 8px; }
.num-sim {
  font: inherit; font-size: 0.78rem; padding: 5px 0; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta-media);
}
.num-sim.respondida { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde-forte); }
.num-sim.atual { outline: 2px solid var(--tinta); outline-offset: 1px; }
.resultado-simulado { display: grid; gap: var(--gap); }

/* ---------------------------------------------------------------- discursiva */

.barra-discursiva { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.barra-discursiva .alternador { margin: 0; }
.barra-discursiva select { width: auto; }
.texto-discursiva {
  font-family: var(--fonte-leitura); font-size: 1rem; line-height: 1.9;
  background: repeating-linear-gradient(transparent, transparent calc(1.9em - 1px), var(--linha) calc(1.9em - 1px), var(--linha) 1.9em);
  background-attachment: local; min-height: 30em;
}
.texto-discursiva[readonly] { opacity: .85; }

/* ---------------------------------------------------------------- erros, praticar, mais */

.caderno-motivo { margin-top: 14px; }
.caderno-motivo label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--tinta-media); margin-bottom: 4px; }
.caderno-motivo textarea { font-size: 0.88rem; }
.rodape-erro { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.retorno-acoes { display: flex; gap: 10px; align-items: center; padding: 0 16px 14px; flex-wrap: wrap; }
.lista-mais { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.item-mais { display: flex; flex-direction: column; gap: 2px; color: var(--tinta); }
.item-mais:hover { text-decoration: none; border-color: var(--linha-forte); }

/* ---------------------------------------------------------------- responsivo */

@media (max-width: 1000px) {
  .grade-graficos { grid-template-columns: 1fr 1fr; }
  .cartao-grafico.grande { grid-column: span 2; }
  .portao { grid-template-columns: 1fr; gap: 34px; padding: 34px 22px; }
  .portao-apresentacao h1 { font-size: 1.7rem; }
  .grade-perfil { grid-template-columns: 1fr; }
  .grade-foco, .grade-simulado { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 15px; }
  .grade-graficos, .grade-listas { grid-template-columns: 1fr; }
  .cartao-grafico.grande { grid-column: auto; }
  .conteudo, .topo-interno, .trilha-interna { padding: 0 15px; }
  .conteudo { padding-top: 20px; }
  .cartao-questao { padding: 18px 16px; }
  .saudacao { flex-direction: column; align-items: stretch; }
  .grade-2 { grid-template-columns: 1fr; }
  .usuario-nome { display: none; }
  .pilha-brindes {
    left: 14px; right: 14px; max-width: none;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* ---- celular: navegação embaixo, ao alcance do polegar ---- */
  .trilha { display: none; }
  .topo-interno { height: 52px; }
  .topo-direita { gap: 4px; }
  .btn-texto { padding: 10px 6px; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .corpo-portao { padding-bottom: 0; }
  .barra-inferior {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--papel); border-top: 1px solid var(--linha);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .item-inferior {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 58px; padding: 6px 0;
    font-size: 0.64rem; color: var(--tinta-fraca); letter-spacing: -0.01em;
  }
  .item-inferior svg { width: 22px; height: 22px; }
  .item-inferior:hover { text-decoration: none; color: var(--tinta); }
  .item-inferior.ativa { color: var(--verde-forte); font-weight: 650; }

  /* ---- toque: alvos de 44px e texto de 16px nos campos (abaixo disso o
     iPhone dá zoom sozinho ao tocar no campo e a tela "pula") ---- */
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 44px; }
  .btn-discreto { min-height: 40px; }
  h1 { font-size: 1.35rem; }
  .cartao { padding: 16px; }
  .filtro-em-linha { flex-wrap: wrap; }
  .filtro-em-linha select { min-width: 0; flex: 1 1 180px; }
  .agenda { grid-template-columns: 1fr; }
  .lista-dados { grid-template-columns: 1fr; gap: 2px; }
  .lista-dados dd { margin-bottom: 8px; }

  /* ---- praticar: cadernos numa faixa que desliza de lado, para a questão
     aparecer logo na primeira tela ---- */
  .trilho-lista {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -15px; padding: 0 15px 4px; gap: 10px; scrollbar-width: none;
  }
  .trilho-lista::-webkit-scrollbar { display: none; }
  .ficha-concurso { flex: 0 0 68%; scroll-snap-align: start; padding: 10px 12px; }
  .alternativa { padding: 13px 12px; }
  /* Responder / Próxima grudados no pé da tela enquanto a questão está visível */
  .acoes-questao {
    position: sticky; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 5;
    background: var(--papel-alto); margin: 16px -16px -18px; padding: 10px 16px;
    border-radius: 0 0 var(--raio-g) var(--raio-g);
  }

  /* ---- telas do plano no celular ---- */
  .notas-flashcard { gap: 5px; }
  .btn-nota { padding: 6px 2px; font-size: 0.8rem; min-height: 0; }
  .btn-nota kbd, .acoes-flashcard kbd { display: none; }
  .acoes-flashcard { position: static; margin: 16px 0 0; padding: 12px 0 0; }
  .flashcard { padding: 18px 16px; }
  .barra-simulado { top: 58px; }
  .menu-plano-corpo { position: static; width: auto; margin-top: 8px; }
  .lista-marcos li { grid-template-columns: 48px 1fr; }
  .lista-marcos li .btn { grid-column: 2; justify-self: start; }
  .tempo { font-size: 2.7rem; }
  .faixa-plano-item { white-space: normal; }
  .acoes-questao .btn-principal, .acoes-questao .btn-secundario { flex: 1; }

  /* ---- login: o formulário vem primeiro ---- */
  .portao { padding-top: 58px; }
  .portao-formulario { order: -1; }
  .cartao-portao { padding: 24px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}