/* ==========================================================
   MENU DO MENTOR — barra lateral agrupada e perfil no rodapé.
   ========================================================== */

/* ---- títulos de grupo ----
   Antes eram só texto cinza a 65% de opacidade sobre o fundo escuro:
   ficava invisível. Agora cada grupo tem uma faixa de realce por trás,
   com um filete na cor da marca, e o título em branco. */
@media (min-width:900px){
  .menu-grupo{margin:16px 0 4px;padding:7px 12px;border-radius:8px;
    background:rgba(255,255,255,.09);border-left:3px solid var(--marca);
    font-family:var(--display);font-size:11px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--menu-forte)}
}
@media (max-width:899px){ .menu-grupo{display:none} }

/* ---- contador de pedidos ---- */
.menu-bolha{margin-left:auto;display:inline-grid;place-items:center;min-width:19px;
  height:19px;padding:0 6px;border-radius:999px;background:var(--atraso);color:#fff;
  font-family:var(--display);font-size:11px;font-weight:700;line-height:1}
@media (max-width:899px){
  .aba .menu-bolha{position:absolute;top:3px;right:50%;margin-right:-20px;
    min-width:16px;height:16px;font-size:10px;padding:0 4px}
  .aba{position:relative}
}

/* ---- perfil no rodapé do menu ---- */
.menu-eu{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid var(--menu-linha);
  border-radius:12px;padding:9px 10px;margin-bottom:10px;cursor:pointer;
  font:inherit;color:var(--menu-forte);transition:background .15s ease}
.menu-eu:hover{background:rgba(255,255,255,.13)}
.menu-eu[aria-current="page"]{background:var(--menu-ativo);
  border-color:rgba(255,255,255,.22)}
.menu-eu:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.eu-ini{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--marca);color:var(--marca-texto);font-family:var(--display);
  font-weight:700;font-size:12.5px;letter-spacing:.02em}
.eu-txt{flex:1;min-width:0}
.eu-txt b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eu-txt small{display:block;font-size:11px;color:var(--menu-texto);line-height:1.3}
.eu-ic{flex:none;opacity:.5}
.eu-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---- folha "Mais" do celular ---- */
.menu-mais{display:grid;gap:8px;margin-top:14px}
.mm-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--superficie2);border:1px solid var(--linha);border-radius:12px;
  padding:12px 14px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--texto)}
.mm-item:hover{border-color:var(--marca);color:var(--marca)}
.mm-item svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================
   MEU PERFIL
   ========================================================== */
.pf-cartao{margin-top:18px;background:var(--superficie);border:1px solid var(--linha);
  border-radius:16px;padding:18px 18px 20px;box-shadow:var(--sombra)}
.pf-cabeca{display:flex;align-items:center;gap:14px;padding-bottom:16px;
  border-bottom:1px solid var(--linha)}
.pf-ini{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:var(--marca);color:var(--marca-texto);font-family:var(--display);
  font-weight:700;font-size:19px}
.pf-cabeca h2{font-family:var(--display);font-size:19px;font-weight:700;margin:0;
  letter-spacing:-.015em;line-height:1.25}
.pf-papel{margin:2px 0 0;font-size:12.5px;color:var(--suave)}

.pf-bloco{margin-top:18px}
.pf-bloco > h3{font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--suave);margin:0 0 12px}
.pf-fixo{margin:11px 0 0;font-size:12px;color:var(--suave);line-height:1.5}
.pf-fixo b{color:var(--texto);font-weight:600}

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

/* A tira de abas dentro do painel deixa de existir: quem navega agora
   e o menu lateral (e a barra de baixo no celular). Duas navegacoes
   para a mesma coisa confundem mais do que ajudam. */
.mp-abas{display:none}

/* ---- Plano de estudo: duas partes (Método / Comece aqui) ---- */
.pl-sub{display:flex;gap:4px;margin-top:16px;padding:4px;border-radius:12px;
  background:var(--superficie2);border:1px solid var(--linha);width:fit-content;max-width:100%}
.pl-sub-b{border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--suave);padding:9px 16px;border-radius:9px;cursor:pointer;min-height:40px}
.pl-sub-b:hover{color:var(--texto)}
.pl-sub-b.ativa{background:var(--superficie);color:var(--texto);box-shadow:var(--sombra)}
.pl-sub-b:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.pl-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (max-width:460px){ .pl-sub{width:100%} .pl-sub-b{flex:1;padding:9px 8px} }

/* ---- Menu do mentor no visual do Dashboard ----
   Pedido do Maurício (23/10): "ícones importam". Cada item ganha o mesmo
   ladrilho de ícone dos atalhos do Dashboard (quadrado arredondado, ícone
   na cor da marca). O item ativo acende o ladrilho inteiro: dá para saber
   onde se está só pela coluna de ícones, sem ler. */
@media (min-width:900px){
  .menu-mentor{gap:3px}
  .menu-mentor .menu-item{gap:12px;padding:7px 10px;min-height:48px;border-radius:12px;
    border:1px solid transparent;font-size:14px}
  .menu-mentor .menu-item svg{flex:none;width:34px;height:34px;padding:7.5px;border-radius:10px;
    background:rgba(255,255,255,.07);color:#93B4F5;stroke-width:1.8;
    transition:background .15s ease,color .15s ease}
  .menu-mentor .menu-item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
  .menu-mentor .menu-item:hover svg{background:rgba(255,255,255,.12);color:#fff}
  .menu-mentor .menu-item[aria-current="page"]{background:var(--menu-ativo);border-color:rgba(255,255,255,.14)}
  .menu-mentor .menu-item[aria-current="page"]::before{display:none}
  .menu-mentor .menu-item[aria-current="page"] svg{background:var(--marca);color:#fff}
  .menu-mentor .menu-item:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
  .menu-mentor .menu-grupo{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){ .menu-mentor .menu-item svg{transition:none} }