/* ==========================================================
   MEU PLANO — cartões de matéria.
   O cartão responde duas perguntas: onde parei e quanto falta.
   Nada de despejo de campos do banco.
   ========================================================== */

.mat-grade{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.mat{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.mat h3{font-family:var(--display);font-size:16.5px;font-weight:700;margin:0;
  letter-spacing:-.01em;line-height:1.25}

/* barra de progresso: é o primeiro sinal, por isso vem antes dos números */
.mat-barra{height:7px;border-radius:999px;background:var(--superficie3);overflow:hidden}
.mat-barra i{display:block;height:100%;border-radius:999px;background:var(--marca);
  transition:width .3s ease}

.mat-num{margin:0;font-size:14px;color:var(--texto)}
.mat-num strong{font-family:var(--display);font-size:17px;font-weight:700}
.mat-sub{margin:0;font-size:12.5px;color:var(--suave)}

.mat-tipos{display:flex;flex-wrap:wrap;gap:6px}
.mat-tipo{font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:3px 9px;
  border-radius:999px;border:1px solid var(--linha-forte);color:var(--suave);
  background:var(--superficie2)}
.mat-tipo[data-t="estudo"]{color:#1D4ED8;border-color:#BFD4FB;background:#EFF4FE}
.mat-tipo[data-t="resumo"]{color:#2563EB;border-color:#CBDDFC;background:#F2F7FE}
.mat-tipo[data-t="revisao"]{color:#B45309;border-color:#F3DCB4;background:#FDF7EC}
.mat-tipo[data-t="exercicio"]{color:#0F766E;border-color:#B7DEDA;background:#EFF8F7}

/* o pé do cartão é a zona de ação: separado por linha, nunca competindo
   com o progresso acima */
.mat-pe{margin-top:auto;padding-top:12px;border-top:1px solid var(--linha)}
.mat-aviso{margin:0;font-size:12.5px;color:var(--suave);line-height:1.45}
.mat-aviso.mat-nao{color:var(--atraso)}

/* ação destrutiva não grita: discreta por padrão, avisa ao passar o mouse */
.btn-fraco{width:100%;background:transparent;border:1px solid var(--linha-forte);
  color:var(--suave);font-weight:600;font-size:13px}
.btn-fraco:hover{border-color:var(--atraso);color:var(--atraso);background:transparent}

@media (max-width:560px){
  .mat-grade{grid-template-columns:1fr}
  .mat{padding:16px 15px 14px}
}

:root[data-tema="escuro"] .mat-tipo[data-t="estudo"]{color:#A8C5FA;border-color:#27406E;background:#17233A}
:root[data-tema="escuro"] .mat-tipo[data-t="resumo"]{color:#BAD3FB;border-color:#27406E;background:#17233A}
:root[data-tema="escuro"] .mat-tipo[data-t="revisao"]{color:#E7C07A;border-color:#5A4522;background:#2A2013}
:root[data-tema="escuro"] .mat-tipo[data-t="exercicio"]{color:#86CFC7;border-color:#1E4B47;background:#122624}

/* ==========================================================
   EDITAL VERTICALIZADO dentro do cartão da matéria.
   Não é uma cópia do edital: é a lista de assuntos que o mentor
   cadastrou. Uma verdade só, nunca duas.
   ========================================================== */

.mat-edital{width:auto;margin-left:auto;padding:6px 12px;font-size:12.5px;
  text-decoration:none;display:inline-flex;align-items:center;border-radius:999px}
.mat-edital:hover{border-color:var(--marca);color:var(--marca)}

.as-abrir{background:none;border:0;padding:6px 0;margin:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--marca);
  text-align:left;display:flex;align-items:center;gap:7px}
.as-abrir::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-bottom:2px;
  transition:transform .2s ease}
.as-abrir.aberto::after{transform:rotate(-135deg);margin-bottom:-2px}

/* sem rolagem própria: lista dentro de lista que rola é armadilha no celular */
.as-caixa{border-top:1px solid var(--linha);margin-top:2px;padding-top:6px}
.as-lista{list-style:none;margin:0;padding:0}

/* cada assunto é um bloco de duas linhas: o nome inteiro em cima, o estado
   embaixo. Assim a altura da linha não depende do tamanho do nome. */
.as{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;
  padding:9px 6px;border-radius:8px;border-bottom:1px solid var(--linha)}
.as:last-child{border-bottom:0}
.as:hover{background:var(--superficie2)}

.as-mk{font-size:12px;line-height:1.5;color:var(--linha-forte);text-align:center}
.as[data-e="pronto"] .as-mk{color:var(--ok)}
.as[data-e="andando"] .as-mk{color:var(--marca)}

.as-txt{min-width:0}
.as-nome{margin:0;font-size:13.5px;line-height:1.4;color:var(--texto)}
.as-item{font-family:var(--display);font-size:11.5px;font-weight:700;color:var(--suave)}
.as[data-e="pronto"] .as-nome{color:var(--suave)}

.as-meta{margin:3px 0 0;display:flex;align-items:center;gap:8px;min-height:20px}
.as-tag{font-size:11.5px;color:var(--suave)}
.as[data-e="pronto"] .as-tag{color:var(--ok);font-weight:600}
.as[data-e="andando"] .as-tag{color:var(--marca);font-weight:600}

/* "já sei isso" aparece ao lado do estado, sem empurrar nada de lugar */
.as-sei{background:none;border:1px solid var(--linha-forte);border-radius:999px;
  padding:2px 9px;font:inherit;font-size:11px;font-weight:600;color:var(--suave);
  cursor:pointer;opacity:0;transition:opacity .15s ease}
.as:hover .as-sei,.as-sei:focus-visible{opacity:1}
.as-sei:hover{border-color:var(--ok);color:var(--ok)}

@media (hover:none){ .as-sei{opacity:1} }

/* ==========================================================
   O QUE ACONTECEU? — o aluno escolhe a situação, não a operação.
   Cada cartão diz o resultado antes de ser clicado.
   ========================================================== */

.aj-grade{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.aj{display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  padding:16px 16px 15px;font:inherit;transition:border-color .15s ease,transform .15s ease}
.aj:hover{border-color:var(--marca);transform:translateY(-1px)}
.aj b{font-family:var(--display);font-size:15px;font-weight:700;color:var(--texto);
  letter-spacing:-.01em}
.aj small{font-size:12.5px;line-height:1.45;color:var(--suave)}

/* a linha que a Tutory nunca mostra: o efeito na data de término */
.aj-previa{margin-top:14px;min-height:28px;font-size:13px;color:var(--suave)}

.aj-efeito{margin:14px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--marca-fraca);border-radius:12px;padding:12px 14px;font-size:13px}
.aj-efeito span{color:var(--ouro);font-weight:600;margin-right:auto}
.aj-efeito b{font-family:var(--display);font-size:15px;color:var(--ouro)}
.aj-efeito i{font-style:normal;color:var(--ouro);opacity:.6}
.aj-efeito .aj-nova{font-size:17px}

.aj-linha{margin:0 0 6px;display:flex;align-items:baseline;gap:10px;font-size:13px}
.aj-linha span{color:var(--suave);margin-right:auto}
.aj-linha b{font-family:var(--display);font-size:14px;color:var(--texto)}
.aj-aperta{color:var(--atraso)}
.aj-sobra{color:var(--ok)}
.aj-reco{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--texto);
  background:var(--superficie2);border-radius:10px;padding:11px 13px}

:root[data-tema="escuro"] .aj-efeito{background:#17233A}
:root[data-tema="escuro"] .aj-efeito span,
:root[data-tema="escuro"] .aj-efeito b,
:root[data-tema="escuro"] .aj-efeito i{color:#A8C5FA}

/* ==========================================================
   FAIXA DO TOPO — o estado do plano em três números.
   Chegar em "Meu plano" e não saber como você está é o pior
   começo possível para uma tela de ajustes.
   ========================================================== */

.pl-faixa{display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.pl-t{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  padding:15px 16px 14px;display:flex;flex-direction:column;gap:3px;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.pl-t em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--suave)}
.pl-t b{font-family:var(--display);font-size:24px;font-weight:800;line-height:1.1;
  letter-spacing:-.02em;color:var(--texto)}
.pl-t:first-child b{color:var(--marca)}
.pl-trilho{display:block;height:6px;border-radius:999px;background:var(--superficie3);
  overflow:hidden;margin-top:6px}
.pl-trilho i{display:block;height:100%;border-radius:999px;background:var(--ok);
  transition:width .4s ease}

/* ==========================================================
   SIMULAÇÃO DAS HORAS — mexe e vê, antes de salvar.
   ========================================================== */

.hp{margin-top:14px;border-radius:12px;padding:13px 15px;font-size:12.5px;
  line-height:1.5;color:var(--suave);background:var(--superficie2);
  border:1px dashed var(--linha-forte);transition:background .2s ease,border-color .2s ease}
.hp-pensando{opacity:.75}
.hp-pronto{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  background:var(--marca-fraca);border:1px solid transparent;color:var(--ouro)}
.hp-pronto em{font-style:normal;font-weight:600;font-size:12.5px}
.hp-pronto b{font-family:var(--display);font-size:23px;font-weight:800;
  letter-spacing:-.02em;line-height:1.1}
.hp-pronto i{font-style:normal;font-size:11.5px;opacity:.75;margin-left:auto}

/* chama o olho para o cartão das horas quando o aluno é mandado para cá */
.piscar{animation:piscar 1.1s ease 2}
@keyframes piscar{
  0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
  50%{box-shadow:0 0 0 5px rgba(37,99,235,.25)}
}

/* ==========================================================
   CAIXAS DE EXPLICAÇÃO dos diálogos
   ========================================================== */

.aj-passos{margin-top:14px;background:var(--superficie2);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.aj-passos p{margin:0;font-size:13px;line-height:1.55;color:var(--texto)}
.aj-passos b{font-weight:700}
.aj-passos p b:first-child{color:var(--marca)}

.aj-nota{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--suave);
  border-left:2px solid var(--linha-forte);padding-left:10px}

/* ==========================================================
   VIDA: os cartões entram em cena em vez de aparecerem secos
   ========================================================== */

.mat,.aj,.pl-t{animation:surge .32s ease both}
.mat:nth-child(2),.aj:nth-child(2),.pl-t:nth-child(2){animation-delay:.04s}
.mat:nth-child(3),.aj:nth-child(3),.pl-t:nth-child(3){animation-delay:.08s}
.mat:nth-child(4),.aj:nth-child(4){animation-delay:.12s}
.mat:nth-child(n+5){animation-delay:.16s}
@keyframes surge{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* o título de seção ganha um filete da marca: organiza a leitura da página */
.secao h2{position:relative;padding-left:12px}
.secao h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:3px;
  border-radius:3px;background:var(--marca)}

@media (prefers-reduced-motion:reduce){
  .mat,.aj,.pl-t{animation:none}
  .piscar{animation:none}
  .aj:hover{transform:none}
}

:root[data-tema="escuro"] .hp-pronto{background:#17233A;color:#A8C5FA}

/* ==========================================================
   CORREÇÕES DA REVISÃO DE USABILIDADE (23/10)
   ========================================================== */

/* Meu plano: sem a coluna da direita, "duas" deixava metade da tela
   em branco. Horas e ciclo passam a dividir a largura inteira. */
.pl-dois{display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));align-items:start}
.pl-dois > .pilha{display:contents}

/* O alerta de atraso vira caminho: dá para clicar e resolver. */
.acao-topo{margin-left:auto;font-size:12.5px;padding:6px 12px;white-space:nowrap}

/* Aluno novo não vê três zeros: vê o que fazer. */
.primeiro-passo{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--suave);
  background:var(--superficie2);border-radius:12px;padding:14px 16px}
.primeiro-passo b{color:var(--texto);font-weight:700}

/* Celular: o cabeçalho das telas empilha em vez de disputar a linha
   com o botão de ação, que empurrava o título para três linhas. */
@media (max-width:620px){
  .pagina{flex-direction:column;align-items:stretch;gap:12px}
  .pagina .acoes{width:100%}
  .pagina .acoes .btn{width:100%}
}

/* Seis abas em 360 px quebravam o rótulo em duas linhas. */
@media (max-width:420px){
  .abas-in .aba{font-size:10px;letter-spacing:-.01em;padding-inline:2px}
  .abas-in .aba svg{width:19px;height:19px}
}

/* ==========================================================
   AJUSTES 23/10 — etapas com números, "já sei isso" com vida,
   e o X que ensina o aluno a explorar sem medo.
   ========================================================== */

/* o X mora em toda janela: entrar e sair sem consequência */
.dlg-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--superficie2);border:1px solid var(--linha);
  color:var(--suave);font-size:20px;line-height:1;cursor:pointer;padding:0;z-index:5;
  transition:all .15s ease}
.dlg-x:hover{background:var(--atraso-fraco);border-color:var(--atraso);color:var(--atraso)}
.dlg{position:relative}
.dlg h2{padding-right:40px}

/* etapas: cada uma diz quanto falta dela */
.mat-etapas{display:flex;flex-direction:column;gap:7px}
.mat-et{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:9px;
  font-size:12px}
.mat-et-n{font-weight:700;letter-spacing:.01em}
.mat-et[data-t="estudo"] .mat-et-n{color:#1D4ED8}
.mat-et[data-t="resumo"] .mat-et-n{color:#2563EB}
.mat-et[data-t="revisao"] .mat-et-n{color:#B45309}
.mat-et[data-t="exercicio"] .mat-et-n{color:#0F766E}
.mat-et-b{height:5px;border-radius:999px;background:var(--superficie3);overflow:hidden}
.mat-et-b i{display:block;height:100%;border-radius:999px;background:currentColor;opacity:.75}
.mat-et[data-t="estudo"] .mat-et-b i{background:#1D4ED8}
.mat-et[data-t="resumo"] .mat-et-b i{background:#60A5FA}
.mat-et[data-t="revisao"] .mat-et-b i{background:#D97706}
.mat-et[data-t="exercicio"] .mat-et-b i{background:#0D9488}
.mat-et-v{color:var(--suave);white-space:nowrap;font-size:11.5px}

/* "já sei isso": ação de verdade, não enfeite escondido */
.as-sei{display:inline-flex;align-items:center;gap:5px;opacity:1;
  background:var(--ok-fraco);border:1px solid var(--ok);border-radius:999px;
  padding:4px 11px;font:inherit;font-size:11.5px;font-weight:700;color:var(--ok);
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.as-sei svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.as-sei:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(22,163,74,.25)}
.as:hover .as-tag{display:inline}

:root[data-tema="escuro"] .mat-et[data-t="estudo"] .mat-et-n{color:#A8C5FA}
:root[data-tema="escuro"] .mat-et[data-t="revisao"] .mat-et-n{color:#E7C07A}
:root[data-tema="escuro"] .mat-et[data-t="exercicio"] .mat-et-n{color:#86CFC7}

/* ==========================================================
   O CICLO DESENHADO — a lista diz a ordem; o desenho mostra
   que o ciclo é uma roda que gira.
   ========================================================== */

.cg{margin:4px 0 16px}
.cg-vazio{margin:0;font-size:12.5px}

.cg-modos{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.cg-m{background:none;border:1px solid var(--linha);border-radius:999px;padding:5px 12px;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--suave);cursor:pointer;
  transition:all .15s ease}
.cg-m:hover{border-color:var(--linha-forte);color:var(--texto)}
.cg-m.ativa{background:var(--marca);border-color:var(--marca);color:var(--marca-texto)}

.cg-corpo{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cg-svg{width:190px;height:190px;flex:none;display:block}

.cg-leg{list-style:none;margin:0;padding:0;flex:1;min-width:150px;
  display:flex;flex-direction:column;gap:5px}
.cg-leg li{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.3}
.cg-leg i{flex:none;width:11px;height:11px;border-radius:3px}
.cg-leg span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-leg .cg-t{margin-left:auto}
.cg-rep{font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;
  background:var(--marca-fraca);color:var(--ouro)}
.cg-t{font-size:11.5px;color:var(--suave);font-weight:600;white-space:nowrap}

.cg-dica{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--suave);
  background:var(--superficie2);border-radius:10px;padding:10px 12px}

@media (max-width:560px){
  .cg-corpo{flex-direction:column;align-items:stretch}
  .cg-svg{width:170px;height:170px;margin:0 auto}
  .cg-leg{width:100%}
}