/* =====================================================================
   AVA IBRAS — identidade tirada do logo: a digital em gradiente
   verde (#8CFC90) → turquesa (#30D8D8) → ciano (#00CCFC), sobre fundo escuro.
   O logo foi desenhado para fundo preto; a tela acompanha.

   Celular primeiro. Sem ícone e sem emoji: o impacto vem de gradiente,
   anel de progresso, tipografia grande e contraste.
   ===================================================================== */

:root{
  --g1:#8CFC90;   /* verde  */
  --g2:#30D8D8;   /* turquesa */
  --g3:#00CCFC;   /* ciano  */
  --gradiente: linear-gradient(115deg, var(--g1), var(--g2) 55%, var(--g3));

  --fundo:#080d14;
  --fundo2:#0d141d;
  --caixa:#111a24;
  --caixa2:#16212d;
  --linha:#1e2c3a;
  --linha-forte:#2b3d4f;
  --tinta:#eaf2f8;
  --fraco:#8ba0b4;
  --apagado:#5d7286;
  --ok:var(--g1);
  --erro:#ff6b6b;
  --aviso:#ffc46b;
  --raio:16px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* brilho sutil no topo, como se a digital iluminasse a página */
  background-image:
    radial-gradient(900px 380px at 50% -140px, rgba(48,216,216,.16), transparent 70%),
    radial-gradient(600px 300px at 100% 0, rgba(0,204,252,.10), transparent 70%);
  background-repeat:no-repeat;
}
a{color:var(--g3)}

/* ---------------------------------------------------------------- topo */
.topo{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border-bottom:1px solid var(--linha);
  background:rgba(8,13,20,.75); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
.topo .marca{display:flex; align-items:center; gap:10px; text-decoration:none}
.topo .marca img{height:30px; width:auto; display:block}
.topo .quem{font-size:.82rem; color:var(--fraco); text-align:right; line-height:1.35}
.topo .quem b{color:var(--tinta); font-weight:600}
.topo .quem a{color:var(--apagado); text-decoration:none; border-bottom:1px solid var(--linha-forte)}

main{max-width:760px; margin:0 auto; padding:22px 16px 64px}
h1{font-size:1.55rem; line-height:1.2; margin:0 0 6px; letter-spacing:-.02em}
h2{font-size:.82rem; margin:34px 0 14px; text-transform:uppercase; letter-spacing:.14em;
   color:var(--apagado); font-weight:700}
.sub{color:var(--fraco); margin:0 0 24px}

/* texto com o gradiente do logo */
.brilho{
  background:var(--gradiente); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ---------------------------------------------------------------- painel do aluno */
.painel{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--caixa2), var(--caixa));
  border:1px solid var(--linha-forte); border-radius:22px; padding:22px;
  margin-bottom:14px;
}
.painel::before{ /* fio de luz no topo do cartão */
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--gradiente);
}
.painel .corpo{display:flex; align-items:center; gap:20px}
.painel .texto{flex:1; min-width:0}
.painel .nivel{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:4px;
}
.painel .pontos{font-size:2.1rem; font-weight:800; letter-spacing:-.03em; line-height:1.05}
.painel .pontos small{font-size:.85rem; font-weight:600; color:var(--fraco); letter-spacing:0}
.painel .falta{color:var(--fraco); font-size:.88rem; margin:8px 0 0}

/* anel de progresso em SVG */
.anel{flex-shrink:0; width:104px; height:104px; position:relative}
.anel svg{transform:rotate(-90deg); display:block}
.anel .meio{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.anel .meio b{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; line-height:1}
.anel .meio span{font-size:.62rem; color:var(--apagado); letter-spacing:.1em; text-transform:uppercase}

/* barra fina do nível */
.trilho{height:6px; border-radius:99px; background:var(--linha); overflow:hidden; margin-top:14px}
.trilho > i{display:block; height:100%; border-radius:99px; background:var(--gradiente);
  box-shadow:0 0 12px rgba(48,216,216,.5)}

/* ---------------------------------------------------------------- números soltos */
.numeros{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.numeros div{
  background:var(--caixa); border:1px solid var(--linha); border-radius:14px;
  padding:14px 10px; text-align:center;
}
.numeros b{display:block; font-size:1.45rem; font-weight:800; letter-spacing:-.02em}
.numeros span{font-size:.68rem; color:var(--apagado); text-transform:uppercase; letter-spacing:.1em}

/* ---------------------------------------------------------------- trilha de módulos */
.etapa{
  display:flex; gap:14px; text-decoration:none; color:inherit;
  background:var(--caixa); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px; margin-bottom:10px; transition:border-color .15s, transform .15s;
}
.etapa:hover{border-color:var(--linha-forte); transform:translateY(-1px)}
.etapa.completa{border-color:rgba(140,252,144,.35)}
.bolha{
  flex-shrink:0; width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem; letter-spacing:-.02em;
  background:var(--fundo2); border:1px solid var(--linha-forte); color:var(--fraco);
}
.etapa.completa .bolha{background:var(--gradiente); color:#062018; border-color:transparent}
.etapa .conteudo{flex:1; min-width:0}
.etapa h3{margin:0 0 4px; font-size:1.02rem; line-height:1.3}
.etapa p{margin:0; color:var(--fraco); font-size:.88rem}
.etapa .marcas{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}

/* ---------------------------------------------------------------- etiquetas */
.selo{
  display:inline-block; padding:4px 10px; border-radius:99px; white-space:nowrap;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--fundo2); color:var(--apagado); border:1px solid var(--linha-forte);
}
.selo.ok{background:rgba(140,252,144,.12); color:var(--g1); border-color:rgba(140,252,144,.35)}
.selo.viva{background:rgba(0,204,252,.12); color:var(--g3); border-color:rgba(0,204,252,.35)}
.selo.aviso{background:rgba(255,196,107,.12); color:var(--aviso); border-color:rgba(255,196,107,.3)}
.selo.erro{background:rgba(255,107,107,.12); color:var(--erro); border-color:rgba(255,107,107,.3)}

/* ---------------------------------------------------------------- conquistas */
.conquistas{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.medalha{
  position:relative; overflow:hidden;
  background:var(--caixa); border:1px solid var(--linha); border-radius:14px; padding:14px;
}
.medalha.feita{border-color:transparent; background:linear-gradient(160deg,rgba(140,252,144,.14),rgba(0,204,252,.10))}
.medalha.feita::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--gradiente)}
.medalha b{display:block; font-size:.92rem; margin-bottom:3px}
.medalha span{font-size:.76rem; color:var(--apagado); line-height:1.4; display:block}
.medalha.feita b{color:var(--tinta)}
.medalha:not(.feita){opacity:.55}

/* ---------------------------------------------------------------- cartões gerais */
.cartao{background:var(--caixa); border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px; margin-bottom:12px}
.cartao.link{display:block; text-decoration:none; color:inherit}
.cartao.link:hover{border-color:var(--linha-forte)}
.cartao h3{margin:0 0 6px; font-size:1.05rem}
.cartao p{margin:0; color:var(--fraco); font-size:.93rem}
.cartao.destaque{border-color:transparent; background:linear-gradient(160deg,var(--caixa2),var(--caixa));
  position:relative; overflow:hidden}
.cartao.destaque::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--gradiente)}
.linha-topo{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.numero{font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--g2)}

/* ---------------------------------------------------------------- botões */
.bt{
  display:inline-block; padding:14px 22px; border-radius:12px; border:0; cursor:pointer;
  background:var(--gradiente); color:#04161f; font-weight:800; font-size:1rem;
  text-decoration:none; text-align:center; line-height:1.2; letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(0,204,252,.18);
}
.bt:hover{filter:brightness(1.08)}
.bt.vazio{background:transparent; color:var(--g3); border:1px solid var(--linha-forte); box-shadow:none}
.bt.largo{display:block; width:100%}
.bt:disabled{opacity:.45; cursor:not-allowed}

/* ---------------------------------------------------------------- formulário */
label{display:block; font-weight:600; margin:18px 0 7px; font-size:.94rem}
input[type=text], input[type=file], textarea, select{
  width:100%; padding:13px; font:inherit; color:var(--tinta);
  background:var(--fundo2); border:1px solid var(--linha-forte); border-radius:12px;
}
input:focus, textarea:focus{outline:2px solid rgba(0,204,252,.45); outline-offset:1px}
textarea{min-height:100px; resize:vertical}
.ajuda{color:var(--apagado); font-size:.85rem; margin:7px 0 0}
input[type=checkbox]{width:22px; height:22px; accent-color:var(--g2)}

/* ---------------------------------------------------------------- exercício */
.alt{
  display:block; width:100%; text-align:left; padding:15px; margin-bottom:10px;
  background:var(--caixa); border:1px solid var(--linha); border-radius:12px;
  font:inherit; color:inherit; cursor:pointer; transition:border-color .12s;
}
.alt:hover{border-color:var(--linha-forte)}
.alt:has(input:checked){border-color:var(--g3); background:rgba(0,204,252,.07)}
.alt input{margin-right:10px; accent-color:var(--g3)}
.alt .letra{font-weight:800; margin-right:9px; color:var(--apagado)}
.alt.certa{border-color:var(--g1); background:rgba(140,252,144,.09)}
.alt.errada{border-color:var(--erro); background:rgba(255,107,107,.08)}
.porque{
  margin:0 0 14px; padding:13px 15px; border-radius:12px;
  background:var(--fundo2); border:1px solid var(--linha); border-left:3px solid var(--g2);
  font-size:.92rem; color:var(--tinta);
}
.porque b{display:block; margin-bottom:4px; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--g2)}

/* ---------------------------------------------------------------- listas */
.lista{border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; background:var(--caixa)}
.item{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--linha); text-decoration:none; color:inherit}
.item:last-child{border-bottom:none}
.item:hover{background:var(--caixa2)}
.item .nome{font-weight:600}
.item .detalhe{color:var(--apagado); font-size:.84rem}
.direita{display:flex; align-items:center; gap:8px; flex-shrink:0}

/* ---------------------------------------------------------------- avisos */
.recado{padding:14px 16px; border-radius:12px; margin-bottom:16px; font-size:.93rem;
  border:1px solid var(--linha-forte); background:var(--caixa)}
.recado.ok{border-color:rgba(140,252,144,.4); background:rgba(140,252,144,.08); color:var(--g1)}
.recado.erro{border-color:rgba(255,107,107,.4); background:rgba(255,107,107,.08); color:var(--erro)}
.recado.aviso{border-color:rgba(255,196,107,.4); background:rgba(255,196,107,.08); color:var(--aviso)}
.ganhou{
  display:flex; align-items:center; gap:12px; padding:16px; border-radius:14px; margin-bottom:16px;
  background:linear-gradient(120deg,rgba(140,252,144,.16),rgba(0,204,252,.12));
  border:1px solid rgba(48,216,216,.4);
}
.ganhou b{font-size:1.5rem; font-weight:800; letter-spacing:-.02em}

.provisorio{
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--aviso); border:1px dashed rgba(255,196,107,.5); border-radius:8px;
  padding:3px 9px; display:inline-block; margin-bottom:10px;
}

.voltar{display:inline-block; margin-bottom:16px; font-size:.88rem; text-decoration:none;
  color:var(--apagado)}
.rodape{color:var(--apagado); font-size:.8rem; margin-top:44px; padding-top:18px;
  border-top:1px solid var(--linha)}

/* ---------------------------------------------------------------- tabela (equipe) */
table{width:100%; border-collapse:collapse; font-size:.88rem}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--linha)}
th{color:var(--apagado); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em}
td.num{text-align:center; font-variant-numeric:tabular-nums}
td a{color:var(--tinta); text-decoration:none; font-weight:600}
.rolagem{overflow-x:auto; border:1px solid var(--linha); border-radius:var(--raio); background:var(--caixa)}
.ponto{color:var(--g1); font-weight:800}
.vazio{color:var(--linha-forte)}

/* ---------------------------------------------------------------- dúvidas */
/* A fala do aluno e a do tutor precisam ser distinguíveis de relance, sem depender de ler o nome:
   quem responde ganha o fio de luz do gradiente na lateral. */
.conversa{display:flex; flex-direction:column; gap:12px}
.fala{
  background:var(--caixa); border:1px solid var(--linha); border-radius:var(--raio);
  padding:15px 17px; position:relative;
}
.fala.equipe{border-color:var(--linha-forte); background:var(--caixa2)}
.fala.equipe::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0;
  background:var(--gradiente);
}
.fala .quem-falou{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:8px; flex-wrap:wrap}
.fala .quem-falou b{font-size:.94rem; display:flex; align-items:center; gap:7px}
.fala .quem-falou span{color:var(--apagado); font-size:.78rem}
/* white-space:pre-line preserva a quebra de linha de quem escreveu pelo celular sem deixar HTML
   passar — o texto sai escapado do EJS. */
.fala p{margin:0; color:var(--tinta); white-space:pre-line; line-height:1.55}

@media (prefers-reduced-motion: reduce){ .etapa{transition:none} }