/*
 * Vade-mecum do Escrevente — folha de estilo.
 *
 * Segunda direção (substitui a v1 "lexicon/codex"): layout claro e
 * convencional de app de questões — abas, alternativas em círculo,
 * faixa de resultado colorida — no mesmo REGISTRO funcional de plataformas
 * como o TecConcursos (referência de interação, não de marca: paleta,
 * tipografia e componentes são nossos, não copiados).
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');

:root{
  color-scheme: light dark;
  --bg:#EEF0F4; --sup:#FFFFFF; --sup2:#F4F5F8; --sup3:#E9EBF0;
  --borda:#E1E4EA; --borda2:#C7CDD8;
  --tinta:#1C2130; --tinta2:#4B5468; --tinta3:#848DA0;

  --acento:#2F5FDE; --acento-h:#2549B3; --acento-fraco:#E7EDFD;
  --acento-solido:var(--acento); --acento-solido-h:var(--acento-h);
  --ok:#1F9D5C; --ok-fraco:#E4F7EC;
  --erro:#E0382D; --erro-fraco:#FCEAE8;
  --alerta:#B9770E; --alerta-fraco:#FBF0DD;
  --foco:#2F5FDE;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --sombra:0 1px 2px rgba(20,24,38,.04), 0 4px 14px rgba(20,24,38,.06);
  --sombra-forte:0 2px 8px rgba(20,24,38,.08), 0 12px 32px rgba(20,24,38,.10);
  --sombra-relevo:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px rgba(20,24,38,.06), 0 10px 24px -10px rgba(20,24,38,.14);
  --fundo-tema-opacidade:.05;
  --fundo-tema:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='110' y1='38' x2='110' y2='152'/%3E%3Cline x1='70' y1='40' x2='150' y2='40'/%3E%3Cpath d='M70 40 L55 78 A15 15 0 0 0 85 78 Z'/%3E%3Cpath d='M150 40 L135 78 A15 15 0 0 0 165 78 Z'/%3E%3Cline x1='88' y1='152' x2='132' y2='152'/%3E%3Cpath d='M92 152 L82 168 L138 168 L128 152'/%3E%3Ccircle cx='110' cy='28' r='7' fill='%23fff' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --bg:#12141B; --sup:#1A1D27; --sup2:#20232E; --sup3:#282C39;
    --borda:#333748; --borda2:#464C61;
    --tinta:#E8EAF0; --tinta2:#AFB6C7; --tinta3:#8890A3;
    --acento:#6E93F5; --acento-h:#87A6F7; --acento-fraco:#1B2740;
    --acento-solido:#3D63C9; --acento-solido-h:#33549E;
    --ok:#5FCB8C; --ok-fraco:#152A20;
    --erro:#F0847A; --erro-fraco:#331B1C;
    --alerta:#E2B058; --alerta-fraco:#332711;
    --foco:#6E93F5;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.32);
    --sombra-forte:0 4px 14px rgba(0,0,0,.36), 0 18px 40px rgba(0,0,0,.4);
    --sombra-relevo:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.35), 0 14px 30px -12px rgba(0,0,0,.45);
    --fundo-tema-opacidade:.06;
  }
}
:root[data-tema="escuro"]{
  --bg:#12141B; --sup:#1A1D27; --sup2:#20232E; --sup3:#282C39;
  --borda:#333748; --borda2:#464C61;
  --tinta:#E8EAF0; --tinta2:#AFB6C7; --tinta3:#8890A3;
  --acento:#6E93F5; --acento-h:#87A6F7; --acento-fraco:#1B2740;
    --acento-solido:#3D63C9; --acento-solido-h:#33549E;
  --ok:#5FCB8C; --ok-fraco:#152A20;
  --erro:#F0847A; --erro-fraco:#331B1C;
  --alerta:#E2B058; --alerta-fraco:#332711;
  --foco:#6E93F5;
  --sombra-relevo:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.35), 0 14px 30px -12px rgba(0,0,0,.45);
  --fundo-tema-opacidade:.06;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tinta);font:15px/1.55 var(--sans);position:relative;
  overflow-x:hidden} /* nenhum elemento largo demais deve conseguir empurrar a página inteira para o lado */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:var(--tinta);
  opacity:var(--fundo-tema-opacidade);
  -webkit-mask-image:var(--fundo-tema);mask-image:var(--fundo-tema);
  -webkit-mask-size:220px;mask-size:220px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.topo,.pagina{position:relative;z-index:1}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.2}
p{margin:0}ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--acento);text-decoration:none}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:3px}
[hidden]{display:none !important}

/* ===== Topo (aba superior, convencional) ===== */
.topo{background:var(--sup);border-bottom:1px solid var(--borda)}
.topo-int{max-width:1100px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:flex-end;
  justify-content:space-between;gap:1.5rem;height:84px;padding-bottom:.6rem}
.marca{display:flex;align-items:center;gap:.55rem;margin-bottom:-6px}
.marca-logo{height:70px;width:auto;display:block}

.abas{display:flex;align-items:flex-end;gap:1.6rem}
.abas a{display:flex;align-items:center;padding-bottom:.5rem;font:600 13.5px/1 var(--sans);color:var(--tinta3);
  border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .15s ease,border-color .15s ease}
.abas a:hover{color:var(--tinta)}
.abas a[data-atual="true"]{color:var(--acento);border-bottom-color:var(--acento)}

.topo-dir{display:flex;align-items:center;gap:1rem;flex:none}
.usuario{font:600 13px/1.3 var(--sans);color:var(--tinta2)}
.marca-acao{font:600 13px/1.2 var(--sans);color:var(--tinta3);background:none;border:0;cursor:pointer}
.marca-acao:hover{color:var(--erro)}

.suporte-whatsapp{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--r-pill);background:#25D366;color:#fff;flex:none;box-shadow:var(--sombra);
  transition:transform .15s ease,box-shadow .15s ease}
.suporte-whatsapp:hover{transform:scale(1.08);box-shadow:var(--sombra-forte)}
.suporte-whatsapp svg{width:17px;height:17px;display:block}

.pagina{min-height:100vh;display:flex;flex-direction:column}
.conteudo{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:1.8rem 1.5rem 4rem}
.conteudo-estreito{max-width:800px}

/* ===== Botões sólidos ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:42px;
  padding:.55rem 1.3rem;border-radius:var(--r-pill);border:1px solid transparent;font:700 14px/1.2 var(--sans);
  white-space:nowrap;cursor:pointer;text-decoration:none;background:none;color:var(--tinta)}
.btn-1{background:var(--acento-solido);color:#fff;box-shadow:0 4px 0 var(--acento-solido-h);
  transform:translateY(0);transition:transform .08s ease,box-shadow .08s ease,background .12s ease}
.btn-1:hover{background:var(--acento-solido)}
.btn-1:active{transform:translateY(3px);box-shadow:0 1px 0 var(--acento-solido-h)}
.btn-2{background:var(--sup);border-color:var(--borda2);color:var(--tinta);box-shadow:0 3px 0 var(--borda2);
  transform:translateY(0);transition:transform .08s ease,box-shadow .08s ease,background .12s ease}
.btn-2:hover{background:var(--sup2)}
.btn-2:active{transform:translateY(2px);box-shadow:0 1px 0 var(--borda2)}
.btn-3{background:none;color:var(--tinta3);font-weight:600;padding:.4rem .2rem}
.btn-3:hover{color:var(--tinta)}
.btn-ok{background:var(--ok);color:#fff}
.btn-ok:hover{filter:brightness(.92)}
.btn-erro{background:var(--erro);color:#fff}
.btn-erro:hover{filter:brightness(.92)}
.btn:disabled{background:var(--sup3);color:var(--tinta3);cursor:not-allowed;box-shadow:none;transform:none}
.btn-bloco{width:100%}
.btn-grande{min-height:48px;font-size:14.5px}

/* ===== Cartão ===== */
.cartao{background:var(--sup);border-radius:var(--r-lg);box-shadow:var(--sombra);
  padding:1.6rem}

/* ===== Formulário ===== */
.campo{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.1rem}
.campo label{font:700 12px/1.2 var(--sans);color:var(--tinta2)}
.campo input{font:15px/1.4 var(--sans);padding:.65rem .8rem;border-radius:var(--r-sm);
  border:1.5px solid var(--borda2);background:var(--sup);color:var(--tinta)}
.campo input:focus-visible{border-color:var(--foco)}

/* ===== Chip / etiqueta ===== */
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:var(--r-pill);
  font:700 11.5px/1.4 var(--sans);background:var(--sup3);color:var(--tinta2)}
.chip-acento{background:var(--acento-fraco);color:var(--acento)}

/* ===== Vídeo institucional (topo da página Início) ===== */
.hero-video{text-align:center;max-width:800px;margin:0 auto 2.4rem}
.hero-video h1{font-size:1.7rem;margin-bottom:.5rem}
.hero-video p{color:var(--tinta3);font-size:14px;margin-bottom:1.3rem}
.video-institucional{width:100%;max-width:800px;border-radius:var(--r-lg);box-shadow:var(--sombra-forte);
  background:#000;display:block;margin:0 auto}

/* ===== Sumário de matérias ===== */
.grade-materias{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.materia-card{display:block;text-decoration:none;color:inherit;background:var(--sup);
  border-radius:var(--r-md);padding:1.2rem 1.3rem;box-shadow:var(--sombra);
  transition:transform .12s,box-shadow .12s}
.materia-card:hover{transform:translateY(-2px);box-shadow:var(--sombra-forte)}
.materia-card h3{font-size:15.5px;margin-bottom:.35rem}
.materia-card .contagem{color:var(--tinta3);font-size:12.5px}

/* ===== Lista de questões ===== */
.lista-questoes{display:flex;flex-direction:column;gap:.7rem}
.item-questao{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--sup);
  border-radius:var(--r-md);padding:1rem 1.2rem;text-decoration:none;
  color:inherit;box-shadow:var(--sombra)}
.item-questao:hover{border-color:var(--acento)}
.item-questao .cabeca{font:700 13.5px/1.4 var(--sans)}
.item-questao .enunciado-curto{color:var(--tinta3);font-size:13px;margin-top:.25rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52ch}

/* ===== Card de questão (padrão de app de prova) ===== */
.cartao-questao{background:var(--sup);border-radius:var(--r-lg);border:1px solid var(--borda);
  box-shadow:var(--sombra-relevo);overflow:hidden}
.questao-abas{display:flex;gap:1.4rem;padding:0 1.6rem;border-bottom:1px solid var(--borda);overflow-x:auto}
.questao-abas a{display:flex;align-items:center;gap:.4rem;height:48px;font:700 13px/1 var(--sans);
  color:var(--tinta3);border-bottom:2.5px solid transparent;white-space:nowrap;cursor:pointer;
  transition:color .15s ease,border-color .15s ease}
.questao-abas a:hover{color:var(--tinta)}
.questao-abas a[data-atual="true"]{color:var(--acento);border-bottom-color:var(--acento)}
.questao-abas a[data-atual="true"]:hover{color:var(--acento-h)}

/* Em telas estreitas as 4 abas não cabem numa linha só com o espaçamento de
   desktop — diminui a fonte e o espaçamento até caberem lado a lado. */
@media (max-width: 480px) {
  .questao-abas{gap:.6rem;padding:0 .8rem}
  .questao-abas a{height:38px;font-size:11px;gap:.2rem}
}

.questao-corpo{padding:1.5rem 1.6rem 1.8rem}

/* ===== Aba "Rascunho" — quadro tipo Paint para contas/cálculos ===== */
.rascunho-enunciado{font:500 12.5px/1.55 var(--sans);color:var(--tinta2);background:var(--sup2);
  border:1px solid var(--borda);border-radius:var(--r-md);padding:.7rem .9rem;margin-bottom:.9rem}
.rascunho-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;background:var(--sup2);
  border:1px solid var(--borda);border-radius:var(--r-md) var(--r-md) 0 0;padding:.6rem .9rem}
.rascunho-cores{display:flex;gap:.4rem}
.rascunho-cor{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.rascunho-cor[data-atual="true"]{border-color:var(--tinta);box-shadow:0 0 0 1px var(--sup2)}
.rascunho-espessuras{display:flex;gap:.35rem;align-items:center;padding-left:.7rem;border-left:1px solid var(--borda2)}
.rascunho-espessura{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--borda2);background:var(--sup);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rascunho-espessura span{display:block;border-radius:50%;background:var(--tinta2)}
.rascunho-espessura[data-atual="true"]{border-color:var(--acento);background:var(--acento-fraco)}
.rascunho-espessura[data-atual="true"] span{background:var(--acento)}
.rascunho-ferramenta,.rascunho-limpar{display:flex;align-items:center;gap:.4rem;
  background:var(--sup);border:1.5px solid var(--borda2);border-radius:var(--r-pill);
  padding:.4rem .9rem;font:700 12.5px var(--sans);color:var(--tinta2);cursor:pointer;
  box-shadow:0 2px 0 var(--borda2);transition:transform .08s ease,box-shadow .08s ease}
.rascunho-ferramenta svg,.rascunho-limpar svg{width:15px;height:15px;flex:none}
.rascunho-ferramenta:hover{color:var(--tinta)}
.rascunho-ferramenta:active,.rascunho-limpar:active{transform:translateY(2px);box-shadow:none}
.rascunho-ferramenta[data-atual="true"]{color:var(--acento);border-color:var(--acento);
  background:var(--acento-fraco);box-shadow:0 2px 0 var(--acento-h)}
.rascunho-limpar{color:var(--erro);border-color:var(--erro);box-shadow:0 2px 0 var(--erro)}
.rascunho-limpar:hover{background:var(--erro-fraco)}
.rascunho-canvas-wrap{border:1px solid var(--borda);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);
  overflow:hidden;background:#fff;box-shadow:var(--sombra)}
#rascunho-canvas{display:block;width:100%;height:420px;cursor:crosshair;touch-action:none}
.rascunho-dica{color:var(--tinta3);font-size:12px;margin-top:.6rem}
.questao-progresso{font:600 11.5px/1.4 var(--sans);color:var(--tinta3);margin-bottom:.5rem}
.questao-progresso-sep{margin:0 .3rem;color:var(--borda2)}
.questao-progresso-acertos{color:var(--ok);font-weight:700}
.questao-progresso-erros{color:var(--erro);font-weight:700}

.questao-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.9rem}
.questao-ref{font:600 12px/1.4 var(--sans);color:var(--tinta3)}
.questao-ref a{color:var(--acento);font-weight:700}

.enunciado{font:500 15.5px/1.62 var(--sans);color:var(--tinta);margin-bottom:1.4rem}

.alternativas{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.3rem}
.alternativa{display:flex;align-items:flex-start;gap:.9rem;padding:.8rem .9rem;border-radius:var(--r-md);
  cursor:pointer;user-select:none;background:var(--sup);border:1.5px solid var(--borda2);
  box-shadow:0 2px 0 var(--borda2);transform:translateY(0);
  transition:transform .08s ease,box-shadow .08s ease,background .12s ease,border-color .12s ease}
.alternativa:not([data-travada="true"]):hover{background:var(--sup2);transform:translateY(-1px);box-shadow:0 3px 0 var(--borda2)}
.alternativa:not([data-travada="true"]):active{transform:translateY(1px);box-shadow:0 1px 0 var(--borda2)}
.alternativa .letra{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font:700 13px/1 var(--sans);background:var(--sup3);color:var(--tinta2);border:1.5px solid var(--borda2)}
.alternativa .texto{padding-top:.15rem;font-size:14.5px;line-height:1.55}

.alternativa[data-marcada="true"]{background:var(--acento-fraco);border-color:var(--acento-solido);box-shadow:0 2px 0 var(--acento-solido)}
.alternativa[data-marcada="true"] .letra{background:var(--acento-solido);color:#fff;border-color:var(--acento-solido)}

.alternativa[data-riscada="true"] .texto{text-decoration:line-through;color:var(--tinta3)}
.alternativa[data-riscada="true"]{opacity:.62}

.alternativa[data-resultado="correta"]{background:var(--ok-fraco);border-color:var(--ok);box-shadow:0 2px 0 var(--ok)}
.alternativa[data-resultado="correta"] .letra{background:var(--ok);color:#fff;border-color:var(--ok)}
.alternativa[data-resultado="marcada_errada"]{background:var(--erro-fraco);border-color:var(--erro);box-shadow:0 2px 0 var(--erro)}
.alternativa[data-resultado="marcada_errada"] .letra{background:var(--erro);color:#fff;border-color:var(--erro)}
.alternativa[data-resultado="ignorada_ruim"]{border-color:var(--erro);box-shadow:0 2px 0 var(--erro)}
.alternativa[data-resultado="riscada_boa"]{opacity:.55}
.alternativa[data-travada="true"]{cursor:default}

.dica-interacao{font-size:12.5px;color:var(--tinta3);margin:-.7rem 0 1.2rem}

#bloco-resolucao{background:var(--sup2);border-bottom:1px solid var(--borda);padding:1.1rem 1.6rem;margin:-1.5rem -1.6rem 1.4rem}
.resolucao-cabecalho{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;font-size:14px}
.gabarito-linha{font:700 14px/1.4 var(--sans);margin-bottom:1rem}
.gabarito-linha .destaque{color:var(--acento)}
.resolucao-item p{font-size:14.5px;line-height:1.6;margin-bottom:.4rem}
.resolucao-item .fundamento-texto p{font-size:13.5px;line-height:1.6;color:var(--tinta2);margin-bottom:.5rem}
.resolucao-item .fundamento-texto p:last-child{margin-bottom:0}
.tag-certa{color:var(--ok);font-weight:800;margin-left:.3rem}
.tag-errada{color:var(--erro);font-weight:800;margin-left:.3rem}

.fundamentacao{margin:.4rem 0 .3rem 3.6rem;padding:.8rem 1rem;background:var(--sup2);
  border-radius:var(--r-sm);font-size:13px;line-height:1.55;color:var(--tinta2)}
.fundamentacao .ref{display:block;font:700 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.03em;
  color:var(--tinta3);margin-bottom:.3rem}
.badge-caderno{display:inline-flex;align-items:center;gap:.35rem;font:700 11px/1.3 var(--sans);
  color:var(--erro);background:var(--erro-fraco);padding:.2rem .55rem;border-radius:var(--r-pill);margin-top:.5rem}
.badge-caderno::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--erro)}

.resultado-resumo{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-radius:var(--r-md);
  margin-bottom:1.2rem;font:700 14.5px/1.3 var(--sans)}
.resultado-resumo.acertou{background:var(--ok-fraco);color:var(--ok)}
.resultado-resumo.errou{background:var(--erro-fraco);color:var(--erro)}
.resultado-resumo::before{content:"👍";font-size:22px;line-height:1;flex:none}
.resultado-resumo.errou::before{content:"💪"}

/* ===== Caderno de Erros ===== */
.grupo-materia{margin-bottom:1.6rem}
.grupo-materia h2{font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;
  color:var(--tinta3);margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--borda)}
.grupo-pasta-titulo{display:flex;align-items:center;gap:.4rem;text-transform:none;letter-spacing:0}
.pasta-icone{font-size:15px;line-height:1;flex:none}
.pasta-nome{font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.04em;color:var(--tinta3);margin-right:.15rem}
.pasta-acao-mini{background:none;border:0;padding:0;font:600 11.5px/1 var(--sans);color:var(--acento);cursor:pointer}
.pasta-acao-mini:hover{text-decoration:underline}
.pasta-acao-excluir{color:var(--erro)}
.pasta-acao-ponto{color:var(--borda2);font-size:11px}
.pasta-desempenho-bt{margin-left:auto;color:var(--tinta3)}

.pasta-desempenho-painel{background:var(--sup2);border:1px solid var(--borda);border-radius:var(--r-md);
  padding:.7rem .9rem;margin:-.3rem 0 .8rem}
.pasta-desempenho-resumo{font:600 12.5px var(--sans);color:var(--tinta2);margin-bottom:.5rem}
.pasta-desempenho-barra{display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--sup3);margin-bottom:.5rem}
.pasta-desempenho-legenda{display:flex;gap:1rem;flex-wrap:wrap;font:600 11.5px var(--sans);color:var(--tinta3)}
.pasta-desempenho-legenda span{display:inline-flex;align-items:center;gap:.35rem}
.pasta-desempenho-legenda i{width:8px;height:8px;border-radius:50%;display:inline-block}
.item-erro{background:var(--sup);border-radius:var(--r-md);
  padding:1rem 1.2rem;margin-bottom:.7rem;box-shadow:var(--sombra)}
.item-erro-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.4rem}
.item-erro .ref{display:block;font:700 11.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;
  color:var(--erro);padding-top:.15rem}
.item-erro .texto{font-size:13.5px;line-height:1.55;color:var(--tinta2);border-radius:var(--r-sm)}
.item-erro .texto[contenteditable="true"]{cursor:text;background:var(--sup2);border-radius:var(--r-sm);
  padding:.5rem .6rem;margin:0 -.6rem}
.item-erro .progresso{margin-top:.55rem;display:flex;align-items:center;gap:.5rem;font-size:12px;color:var(--tinta3)}
.pontinhos{display:flex;gap:4px}
.pontinhos span{width:7px;height:7px;border-radius:50%;background:var(--borda2)}
.pontinhos span.feito{background:var(--ok)}

.editor-acoes{display:flex;align-items:center;gap:.6rem;flex:none}
.anotacao-status{font:700 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.03em;
  color:var(--acento);background:var(--acento-fraco);padding:.25rem .55rem;border-radius:var(--r-pill)}
.btn-editar-anotacao{font:700 11.5px/1 var(--sans);color:var(--tinta3);background:none;
  border:1.5px solid var(--borda2);border-radius:var(--r-pill);padding:.3rem .7rem;cursor:pointer;
  transition:color .12s ease,border-color .12s ease}
.btn-editar-anotacao:hover{color:var(--acento);border-color:var(--acento)}

.anotacao-toolbar{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  background:var(--sup2);border:1px solid var(--borda);border-radius:var(--r-md);
  padding:.5rem .6rem;margin-top:.9rem}
.anotacao-toolbar button[data-cmd]{min-width:30px;height:30px;padding:0 .5rem;border-radius:var(--r-sm);
  border:1.5px solid var(--borda2);background:var(--sup);color:var(--tinta);font:700 13px/1 var(--sans);
  cursor:pointer}
.anotacao-toolbar button[data-cmd]:hover{background:var(--sup3)}
.anotacao-cores{display:inline-flex;align-items:center;gap:.4rem;padding:0 .2rem}
.anotacao-toolbar button.anotacao-cor-swatch{width:24px;height:24px;min-width:0;padding:0;border-radius:50%;cursor:pointer;
  background:var(--cor);border:2px solid var(--sup);box-shadow:0 0 0 1.5px var(--borda2);
  transition:box-shadow .12s ease,transform .12s ease}
.anotacao-toolbar button.anotacao-cor-swatch:hover{box-shadow:0 0 0 1.5px var(--acento);transform:scale(1.12);background:var(--cor)}
.anotacao-fonte-input{width:44px;height:30px;text-align:center;font:700 12.5px/1 var(--sans);
  color:var(--tinta);background:var(--sup);border:1.5px solid var(--borda2);border-radius:var(--r-sm);
  -moz-appearance:textfield}
.anotacao-fonte-input::-webkit-outer-spin-button,.anotacao-fonte-input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.anotacao-fonte-input:focus-visible{border-color:var(--foco)}
.anotacao-toolbar-sep{flex:1}
.anotacao-toolbar .btn{min-height:30px;padding:0 .8rem;font-size:12.5px}
.anotacao-toolbar .btn-3{font-size:12.5px}

.vazio{text-align:center;padding:3rem 1rem;color:var(--tinta3)}

/* ===== Cadernos (pastas de questões) ===== */
.sumario-cadernos{display:flex;flex-direction:column;gap:.7rem}
.caderno-linha{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--sup);
  border-radius:var(--r-md);padding:1rem 1.2rem;box-shadow:var(--sombra)}
.caderno-linha .titulo{font:700 14.5px/1.3 var(--sans)}
.caderno-linha .contagem{font-size:12px;color:var(--tinta3);margin-top:.2rem;display:block}

.materia-bloco{border-radius:var(--r-md);margin-bottom:.7rem;
  overflow:hidden;background:var(--sup)}
.materia-cabecalho{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem}
.materia-cabecalho label{display:flex;align-items:center;gap:.6rem;font:700 14px/1.3 var(--sans);
  flex:1;cursor:pointer}
.lista-itens{display:none;padding:.3rem 1.1rem 1rem 2.6rem;border-top:1px solid var(--borda)}
.lista-itens.aberta{display:block}
.item-check{display:flex;align-items:flex-start;gap:.55rem;padding:.4rem 0;font-size:13.5px;color:var(--tinta2)}
.item-check input{margin-top:.25rem}
input[type="checkbox"]{width:16px;height:16px;accent-color:var(--acento)}

/* ===== Estatísticas ===== */
.filtro-materia{display:flex;align-items:center;flex-wrap:wrap;row-gap:.5rem;gap:.6rem;margin-bottom:1.4rem}
.filtro-exibir-grupo{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.6rem}
.filtro-materia select{font:600 13px var(--sans);padding:.45rem .65rem;border-radius:var(--r-sm);
  border:1.5px solid var(--borda2);background:var(--sup);color:var(--tinta)}

.grade-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem;margin-bottom:1.6rem}
.resumo-num{background:var(--sup);border-radius:var(--r-md);padding:.9rem 1rem;
  box-shadow:var(--sombra)}
.resumo-num .valor{font:800 22px/1 var(--sans);color:var(--tinta)}
.resumo-num .rotulo{font-size:11px;color:var(--tinta3);text-transform:uppercase;letter-spacing:.03em;margin-top:.3rem}

.duo-rosca{display:flex;gap:2.2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.rosca-bloco{text-align:center;min-width:180px;flex:1 1 180px}
.rosca-bloco h3{font-size:13px;color:var(--tinta2);margin-bottom:.8rem;font-weight:700}
.rosca{width:150px;height:150px;border-radius:50%;margin:0 auto .8rem;display:grid;place-items:center}
.rosca .miolo{width:64%;height:64%;border-radius:50%;background:var(--sup);display:flex;flex-direction:column;
  align-items:center;justify-content:center;box-shadow:var(--sombra)}
.rosca .miolo b{font:800 18px/1.1 var(--sans);color:var(--ok)}
.rosca .miolo span{font:700 11.5px/1.2 var(--sans);color:var(--erro);margin-top:.15rem}
.legenda-rosca{display:flex;gap:1rem;justify-content:center;font-size:12px;color:var(--tinta2)}
.legenda-rosca span{display:inline-flex;align-items:center;gap:.35rem}
.ponto{width:8px;height:8px;border-radius:50%;display:inline-block}

.tabela-materias{display:flex;flex-direction:column;gap:.7rem}
.linha-materia{background:var(--sup);border-radius:var(--r-md);padding:.9rem 1.1rem;
  box-shadow:var(--sombra)}
.linha-materia .topo-linha{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.4rem}
.linha-materia .topo-linha strong{font-size:13.5px}
.linha-materia .pct{font:700 13px/1 var(--sans);color:var(--tinta2)}
.barra-materia{height:7px;border-radius:var(--r-pill);background:var(--sup3);overflow:hidden;display:flex}
.barra-materia > div{height:100%}
.linha-materia{display:flex;align-items:flex-start;gap:.7rem}
.linha-materia input[type="checkbox"]{margin-top:.2rem;flex:none}
.linha-materia .linha-corpo{flex:1;min-width:0}
.selecao-resumo{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 1.1rem;
  background:var(--sup2);border-radius:var(--r-md);margin:.9rem 0 1.4rem;font:600 13px var(--sans);color:var(--tinta2)}
.selecao-resumo b{color:var(--tinta)}

/* ===== Avisos ===== */
.aviso{border-radius:var(--r-sm);padding:.7rem 1rem;font-size:13.5px;margin-bottom:.6rem;background:var(--sup2)}
.aviso.a-erro{background:var(--erro-fraco);color:var(--erro)}
.aviso.a-sucesso{background:var(--ok-fraco);color:var(--ok)}
.aviso.a-ok{background:var(--ok-fraco);color:var(--ok)}

/* ===== Login/cadastro ===== */
.tela-cheia{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.caixa-login{width:100%;max-width:400px}
.caixa-login .marca{justify-content:center;margin-bottom:1.6rem}
.caixa-login .marca-logo{height:90px}
.trocar-modo{text-align:center;margin-top:1rem;font-size:13.5px;color:var(--tinta3)}

/* Logo + as 4 abas + usuário/conta/sair juntos precisam de ~950px numa
   linha só — sem isso, em tablets (768-1000px, ex. iPad em pé) o bloco da
   direita (usuário/Minha conta/Sair) vazava pra fora da tela. Cobre tablet
   E celular (720px já entra aqui, então a regra específica dele abaixo só
   completa o que muda a mais nessa faixa). */
@media (max-width: 1000px){
  .topo-int{height:auto;flex-wrap:wrap;padding:.8rem 1.1rem;gap:.8rem}
  .abas{order:3;width:100%;height:auto;gap:.5rem;justify-content:space-between}
  .abas a{font-size:11px;padding:.5rem 0}
}

@media (max-width: 720px){
  .conteudo{padding:1.3rem 1.1rem 3rem}
  .fundamentacao{margin-left:0}
}

/* ===== Mascote (personagem original do site — óculos, barba, camisa com
   emblema de balança; inspirado nas figurinhas de referência, redesenhado do
   zero em SVG para poder animar por partes) ===== */
/* O balão fica posicionado de forma ABSOLUTA acima do personagem (não como
   irmão numa coluna flex) — assim, mostrar/esconder o balão nunca empurra
   nem desloca a posição do próprio mascote (bug corrigido: o balão chegou a
   invadir o cabeçalho quando o personagem foi ancorado perto do topo). */
.mascote-flutuante{position:fixed;right:1.3rem;bottom:1.2rem;z-index:400;pointer-events:none}
.mascote-balao{position:absolute;right:0;bottom:calc(100% + 10px);
  background:var(--sup);color:var(--tinta);border:1.5px solid var(--borda2);
  border-radius:var(--r-md);padding:.55rem .85rem;font:700 12.5px/1.35 var(--sans);
  box-shadow:var(--sombra);max-width:180px;white-space:normal;
  opacity:0;transform:translateY(6px) scale(.96);transition:opacity .18s ease,transform .18s ease}
.mascote-balao.mostrar{opacity:1;transform:translateY(0) scale(1)}
.mascote-balao::after{content:'';position:absolute;right:20px;bottom:-6px;width:11px;height:11px;
  background:var(--sup);border-right:1.5px solid var(--borda2);border-bottom:1.5px solid var(--borda2);
  transform:rotate(45deg)}
/* Sem espaço acima do personagem (perto do cabeçalho), o balão vira para
   baixo — mesma caixa, só espelhada verticalmente (posição e seta). */
.mascote-balao.abaixo{bottom:auto;top:calc(100% + 10px)}
.mascote-balao.abaixo::after{bottom:auto;top:-6px;border-right:none;border-bottom:none;
  border-left:1.5px solid var(--borda2);border-top:1.5px solid var(--borda2)}

.mascote-corpo{position:relative;width:70px;height:90px}
.mascote-visual{width:100%;height:100%}
.mascote-svg{display:block;overflow:visible;animation:mascote-respirar 3.6s ease-in-out infinite}
.mascote-img{position:absolute;inset:0;object-fit:contain;opacity:0;transition:opacity .22s ease}
.mascote-img.mostrar{opacity:1;animation:mascote-respirar 3.6s ease-in-out infinite}
.mascote-sombra{fill:rgba(20,24,38,.16)}

.mascote-pele{fill:#E8B48C}
.mascote-camisa,.mascote-manga{fill:var(--acento-solido)}
.mascote-colarinho,.mascote-prancheta{fill:#FAFAFA}
.mascote-prancheta{stroke:#C7CDD8;stroke-width:1.5}
.mascote-mao{fill:#E8B48C}
.mascote-cabelo,.mascote-sobrancelha{fill:#4A3728}
.mascote-braco{transform-box:fill-box}
.mascote-braco-esq{transform-origin:100% 12%}
.mascote-braco-dir{transform-origin:0% 12%}
.mascote-emblema line,.mascote-emblema circle{stroke:#D4A017;stroke-width:2.2;stroke-linecap:round}
.mascote-emblema circle{fill:#D4A017}

.mascote-oculos rect{fill:none;stroke:#2B2B2B;stroke-width:3}
.mascote-oculos line{stroke:#2B2B2B;stroke-width:3}

.mascote-olho{transform-box:fill-box;transform-origin:center;animation:mascote-piscar 5.2s ease-in-out infinite;
  transition:opacity .28s ease}
.mascote-olho-dir{animation-delay:.12s}
.mascote-pupila{fill:#2B2B2B}
.mascote-olhos-feliz{opacity:0;transition:opacity .28s ease}
.mascote-olhos-feliz path{fill:none;stroke:#4A3728;stroke-width:2.6;stroke-linecap:round}
.mascote-boca{transition:opacity .28s ease}
.mascote-boca-neutra,.mascote-boca-feliz{fill:#fff;stroke:#5A3E24;stroke-width:2}
.mascote-boca-triste{fill:none;stroke:#5A3E24;stroke-width:2.4;stroke-linecap:round}
.mascote-boca-feliz{opacity:0}
.mascote-boca-triste{opacity:0}

/* Todas as variantes de expressão ficam sempre no DOM, sobrepostas — a troca
   de estado é um crossfade de opacidade (não um display:none/block instantâneo),
   para o rosto do mascote transicionar suavemente entre feliz/triste/neutro. */
.mascote-svg.feliz .mascote-olhos{opacity:0}
.mascote-svg.feliz .mascote-olhos-feliz{opacity:1}
.mascote-svg.feliz .mascote-boca-neutra{opacity:0}
.mascote-svg.feliz .mascote-boca-feliz{opacity:1}
.mascote-svg.feliz .mascote-braco-esq{animation:mascote-acenar .55s ease-in-out 2}
.mascote-svg.feliz .mascote-braco-dir{animation:mascote-acenar .55s ease-in-out 2 reverse}

.mascote-svg.triste .mascote-boca-neutra{opacity:0}
.mascote-svg.triste .mascote-boca-triste{opacity:1}

/* Pulo (acerto) e balanço (erro) valem tanto para a foto real quanto para o
   SVG de fallback — aplicados no wrapper, não em cada um separadamente. */
.mascote-corpo.feliz{animation:mascote-pular .6s ease-out}
.mascote-corpo.triste{animation:mascote-balancar .5s ease-in-out}

@keyframes mascote-respirar{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-1.5deg)}}
@keyframes mascote-piscar{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes mascote-acenar{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-22deg)}}
@keyframes mascote-pular{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-14px) rotate(-4deg)}
  55%{transform:translateY(0) rotate(3deg)}75%{transform:translateY(-5px) rotate(-2deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes mascote-balancar{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-5px) rotate(-4deg)}
  75%{transform:translateX(5px) rotate(4deg)}}

/* Em telas largas, o mascote sai do canto flutuante e passa a morar ancorado
   à esquerda do card de questão — não por fórmula de % da viewport (que só
   acerta numa resolução específica), mas por MEDIÇÃO REAL da posição do
   card via JS (ver ancorarMascoteAoCard em comum.js), que recalcula a cada
   resize. `.mascote-ancorado` é aplicada só quando essa medição roda. */
.mascote-flutuante.mascote-ancorado{position:absolute !important;right:auto !important;bottom:auto !important}
@media (min-width: 1200px){
  .mascote-corpo{width:90px;height:116px}
  .mascote-balao{max-width:170px}
}
@media (min-width: 1500px){
  .mascote-corpo{width:130px;height:167px}
  .mascote-balao{max-width:200px}
}

@media (max-width: 720px){
  .mascote-flutuante{right:.8rem;bottom:.8rem}
  .mascote-corpo{width:52px;height:67px}
  .mascote-balao{max-width:150px;font-size:11.5px}
}