/* ==========================================================
   As telas novas de 23/10: metas do coach, dias de orientação, falar
   com um aluno, dicas do plano, logo, dúvidas, pesquisa, gamificação,
   dono da plataforma e e-mails. Reaproveitam os cartões pm-* e cn-*.
   Celular primeiro (360 px): nada aqui passa da largura da tela, e o
   botão de apagar fica sempre na outra ponta do de salvar.
   ========================================================== */

/* ---- abas internas de uma tela ---- */
.cc-abas{display:flex;gap:6px;margin:14px 0 16px;overflow-x:auto}
.cc-aba{flex:none;border:1px solid var(--linha);background:var(--superficie);color:var(--suave);
  border-radius:999px;padding:9px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:40px}
.cc-aba[aria-selected="true"]{background:var(--marca);border-color:var(--marca);color:var(--marca-texto)}

/* ---- metas do coach ---- */
.cc-linha{margin:8px 0 0;font-size:14px}
.cc-prox{margin:4px 0 0;font-size:13px;color:var(--suave)}
.cc-cont{margin:8px 0 0;font-size:13.5px;color:var(--texto);background:var(--superficie2);border-radius:10px;
  padding:9px 11px;overflow-wrap:anywhere}
.cc-cont a,.cc-orient a,.cc-instr a{color:var(--marca);overflow-wrap:anywhere}
.cc-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:4px}
.cc-dia{position:relative;display:block;cursor:pointer}
.cc-dia input{position:absolute;opacity:0;inset:0}
.cc-dia span{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--linha);
  border-radius:10px;font-size:13px;font-weight:600;background:var(--superficie)}
.cc-dia input:checked + span{background:var(--marca);border-color:var(--marca);color:var(--marca-texto)}
.cc-dia input:focus-visible + span{box-shadow:0 0 0 3px var(--marca-fraca)}
.cc-previa{margin:12px 0 0;font-size:13.5px;background:var(--marca-fraca);border-radius:10px;padding:10px 12px}
.cc-previa.ruim{background:var(--atraso-fraco);color:var(--atraso)}
.cc-conf{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:14px;cursor:pointer}
.cc-conf input{width:20px;height:20px;flex:none;accent-color:var(--marca);margin-top:1px}
.cc-orient{display:flex;gap:12px;align-items:flex-start;background:var(--marca-fraca);border:1px solid var(--marca);
  border-radius:14px;padding:13px 14px;margin:0 0 14px}
.cc-orient-ic svg{width:24px;height:24px;stroke:var(--marca);fill:none;stroke-width:1.8}
.cc-orient b{display:block;font-size:15px}
.cc-orient small{display:block;color:var(--suave);font-size:13px;margin-top:2px}
.cc-orient p{margin:8px 0 0;font-size:14px;overflow-wrap:anywhere}

/* ---- recado para um aluno ---- */
.so-voce{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--marca);background:var(--marca-fraca);border-radius:999px;padding:2px 8px;margin:2px 0 4px}
.fl-botoes{display:flex;flex-wrap:wrap;gap:8px}
.fl-botoes .btn{flex:1 1 200px}
.fa-lista li .fl-del,.fa-lista li [data-eq-tirar],.fa-lista li [data-eq-cancelar],.fa-lista li [data-dc-pagar]{margin-top:6px}
.fl-chaves{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fl-zona{margin-top:22px;padding-top:12px;border-top:1px solid var(--linha);text-align:right}

/* ---- dicas do plano ---- */
.dc-disc{border:1px solid var(--linha);border-radius:13px;background:var(--superficie);margin-bottom:8px}
.dc-disc summary{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;cursor:pointer;min-height:48px}
.dc-disc summary small{color:var(--suave);font-size:12.5px;text-align:right}
.dc-lista{list-style:none;margin:0;padding:0 8px 8px}
.dc-item{display:flex;gap:8px;align-items:flex-start;padding:8px 4px;border-top:1px solid var(--linha)}
.dc-estrela{flex:none;width:44px;height:44px;border:1px solid var(--linha);border-radius:10px;background:var(--superficie2);
  color:var(--linha-forte);font-size:20px;cursor:pointer}
.dc-estrela.on{color:#D97706;border-color:#D97706;background:rgba(217,119,6,.10)}
.dc-txt{flex:1;min-width:0}
.dc-txt span{display:block;font-size:14px;line-height:1.35;margin-bottom:5px}
.dc-txt textarea{width:100%;background:var(--superficie2);border:1px solid var(--linha);border-radius:10px;padding:8px 10px;
  font:inherit;font-size:14px;color:var(--texto);resize:vertical;min-height:40px}
.md-selo.importante{background:rgba(217,119,6,.12);color:#B45309}
.dc-plano .md-dica-rot{color:#B45309}

/* ---- logo e foto ---- */
.marca-logo{display:block;max-width:150px;max-height:44px;object-fit:contain}
.mc-linha{display:flex;gap:14px;align-items:flex-start;margin-top:14px}
.mc-previa{flex:none;width:96px;height:64px;border-radius:12px;background:var(--menu-bg);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.mc-previa.redondo{width:64px;border-radius:50%;background:var(--superficie2);border:1px solid var(--linha)}
.mc-previa img{max-width:100%;max-height:100%;object-fit:contain}
.mc-previa.redondo img{width:100%;height:100%;object-fit:cover}
.mc-previa span{font-size:11px;color:var(--menu-texto);text-align:center;padding:4px}
.mc-previa.redondo span{color:var(--suave)}
.mc-txt{flex:1;min-width:0}
.mc-txt b{display:block;font-size:14px}
.mc-txt em{display:block;font-style:normal;font-size:13px;color:var(--suave);margin-top:2px}
.mc-bts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.mc-tirar{margin-left:auto}

/* ---- dúvidas ---- */
.dv-perg{margin:8px 0 10px;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.dv-quando{font-size:12.5px;color:var(--suave)}
.dv-nova{padding:14px}

/* ---- pesquisa ---- */
.eg-nps-num{display:flex;gap:14px;align-items:center;margin-top:12px}
.eg-nps-num b{font-family:var(--display);font-size:34px;font-weight:800}
.eg-nps-num span{font-size:13px;color:var(--suave)}
.eg-pesq{background:var(--superficie);border:1px solid var(--marca);border-radius:14px;padding:14px;margin:0 0 16px;position:relative}
.eg-pesq > b{display:block;font-size:15px;padding-right:70px}
.eg-notas{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;margin-top:12px}
.eg-nota{min-height:40px;border:1px solid var(--linha);border-radius:8px;background:var(--superficie2);font:inherit;
  font-size:14px;font-weight:700;color:var(--texto);cursor:pointer;padding:0}
.eg-nota.sel{background:var(--marca);border-color:var(--marca);color:var(--marca-texto)}
.eg-extremos{display:flex;justify-content:space-between;font-size:11.5px;color:var(--suave);margin-top:4px}
.eg-depois{position:absolute;top:10px;right:10px;border:0;background:none;color:var(--suave);font:inherit;font-size:13px;
  cursor:pointer;min-height:36px;padding:0 6px}

/* ---- gamificação ---- */
.eg-placar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.eg-placar > div{background:var(--superficie);border:1px solid var(--linha);border-radius:13px;padding:12px 10px;text-align:center}
.eg-placar b{display:block;font-family:var(--display);font-size:26px;font-weight:800}
.eg-placar span{display:block;font-size:12px;color:var(--suave);margin-top:2px}
.eg-fogo{border-color:#D97706 !important;background:rgba(217,119,6,.08) !important}
.eg-fogo b{color:#D97706}
.eg-medalhas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.eg-med{font-size:12.5px;border:1px dashed var(--linha-forte);color:var(--suave);border-radius:999px;padding:5px 10px}
.eg-med.tem{border:1px solid #D97706;color:#B45309;background:rgba(217,119,6,.10);font-weight:700}

/* ---- ranking só com a minha posição ---- */
.dp-minha{display:flex;gap:14px;align-items:center}
.dp-pos.grande{width:auto;min-width:56px;font-size:28px;color:var(--marca)}
.dp-minha b{display:block;font-size:15px}
.dp-minha small{display:block;font-size:12.5px;color:var(--suave);margin-top:2px}

/* ---- dono ---- */
.dn-inativa{opacity:.6}

/* ---- e-mails ---- */
.em-previa{background:var(--superficie2);border:1px solid var(--linha);border-radius:12px;padding:12px;margin-top:10px;font-size:14px}
.em-previa small{display:block;color:var(--suave);font-size:12px}
.em-previa b{display:block;margin:4px 0 6px}
.em-previa p{margin:0;overflow-wrap:anywhere}

@media (max-width:400px){
  .eg-nota{font-size:12.5px;min-height:38px}
  .mc-linha{gap:10px}
}

/* ---- dono: planos personalizados ---- */
.dn-topo{display:flex;flex-wrap:wrap;gap:8px}
.dn-grupo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin:22px 0 4px}
.dn-grupo h2{margin:0;font-family:var(--display);font-size:17px}
.dn-grupo small{color:var(--suave);font-size:12.5px}
.dn-cartao-pers{border-left:4px solid var(--marca)}
.pm-selo.dn-pers{background:color-mix(in srgb,var(--marca) 16%,transparent);color:var(--marca)}
.pm-selo.neutro{background:var(--superficie2);color:var(--suave)}
.dn-quem{margin:0;font-size:13px}
.dn-previa{background:var(--superficie2);border-radius:12px;padding:12px;margin:12px 0;font-size:14px}
.dn-previa p{margin:0 0 6px}
.dn-lin{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-variant-numeric:tabular-nums}
.dn-tot{border-top:1px solid var(--linha);margin-top:6px;padding-top:8px;font-weight:700}
.dn-dif{font-size:13px;margin:6px 0 0!important}
.dn-mais{color:var(--ok)}
.dn-menos{color:var(--atraso)}
.dn-hr{border:0;border-top:1px solid var(--linha);margin:10px 0}
.dn-aviso{background:var(--atraso-fraco);border-radius:12px;padding:12px;font-size:14px}
.dn-perigo{color:var(--atraso);border-color:var(--atraso)}

/* gamificação: regras do mentor e meta de questões da semana */
.eg-fs{border:1px solid var(--linha);border-radius:12px;padding:8px 12px 10px;margin:0}
.eg-fs legend{font-size:13px;font-weight:700;color:var(--suave);padding:0 4px}
.eg-q{margin-top:12px;background:var(--superficie);border:1px solid var(--linha);border-radius:13px;padding:12px}
.eg-q-topo{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.eg-q-topo span{font-variant-numeric:tabular-nums;font-weight:700}
.eg-q-barra{height:10px;border-radius:999px;background:var(--superficie2);margin-top:8px;overflow:hidden}
.eg-q-barra i{display:block;height:100%;background:var(--marca);border-radius:999px}
.eg-q small{display:block;margin-top:6px;font-size:12.5px;color:var(--suave)}

.dc-barra{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 10px}

/* ---- meta do mentor: assuntos, links, quem fez ---- */
.cc-ass{max-height:200px;margin-top:6px}
.cc-planos{max-height:190px;margin-top:6px}
.cc-dica{display:block;margin-top:4px;color:var(--suave);font-size:12.5px}
.cc-link-lin{display:grid;grid-template-columns:1fr 1.4fr 40px;gap:6px;margin-bottom:8px}
.cc-link-lin input{min-width:0}
.cc-lk-x{border:1px solid var(--linha);background:var(--superficie);color:var(--atraso);border-radius:10px;font-size:20px;cursor:pointer;min-height:42px}
@media (max-width:520px){ .cc-link-lin{grid-template-columns:1fr 40px} .cc-link-lin .cc-lk-u{grid-column:1 / 2} }
.cc-andam{margin:8px 0 0;font-size:13.5px;color:var(--suave)}
.cc-andam b{color:var(--ok)}
.cc-atraso{color:var(--atraso);font-weight:700}
.cc-quem{display:grid;gap:10px;margin-top:12px;max-height:55vh;overflow:auto}
.cc-al{border:1px solid var(--linha);border-radius:12px;padding:11px 13px;background:var(--superficie)}
.cc-al-topo{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:7px}
.cc-al small{display:block;margin-top:6px;color:var(--suave);font-size:12px}
.cc-st{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.cc-st.ok{background:var(--ok-fraco);color:var(--ok)}
.cc-st.atraso{background:var(--atraso-fraco);color:var(--atraso)}
.cc-st.nada{background:var(--superficie2);color:var(--suave)}
.cc-dias-lista{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.cc-dias-lista span{font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--superficie2)}
.cc-dias-lista .cc-dia-ok{color:var(--ok)}
.cc-dias-lista .cc-dia-nao{color:var(--atraso)}
.cc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cc-link{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;background:var(--marca);color:var(--marca-texto)!important;
  font-weight:600;font-size:13.5px;text-decoration:none}
.cc-todos{margin:6px 0 2px;min-height:38px;font-size:13px}

/* ---- atalhos para perguntar ao mentor ---- */
.dv-atalho{display:flex;align-items:center;gap:12px;background:var(--superficie);border:1px solid var(--linha);
  border-radius:14px;padding:12px 14px;margin:14px 0;box-shadow:var(--sombra)}
.dv-atalho > div{flex:1;min-width:0}
.dv-atalho b{display:block;font-size:14.5px}
.dv-atalho small{display:block;font-size:12.5px;color:var(--suave);line-height:1.4}
.dv-at-ic svg{width:26px;height:26px;stroke:var(--marca);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:420px){ .dv-atalho{flex-wrap:wrap} .dv-atalho .btn{width:100%} }
.dv-meta{margin-top:10px}

/* boas-vindas do aluno recém-chegado, no lugar do mural vazio */
.boas-vindas{border:1px solid var(--marca-fraca);background:var(--marca-fraca);border-radius:var(--r-sm);padding:14px 16px}
.boas-vindas b{font-size:15px}
.boas-vindas p{margin:6px 0 12px;color:var(--texto);font-size:14px;line-height:1.5}
.aviso-prova{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--atraso-fraco);color:var(--texto);font-size:13.5px;line-height:1.5}

/* o aluno tira do Início o recado que já leu */
.av-excluir{margin-top:8px;background:none;border:0;padding:0;color:var(--texto);opacity:.6;font:inherit;font-size:.85em;text-decoration:underline;cursor:pointer}
.av-excluir:hover{opacity:1}

/* "Já sei alguns assuntos" no fim da tela Hoje */
.md-fora{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 8px;padding:14px 16px;border:1px dashed var(--linha);border-radius:12px;color:var(--suave);font-size:14px}
.md-fora .btn{margin-left:auto}
@media (max-width:560px){ .md-fora .btn{margin-left:0;width:100%} }

/* Meu plano: no celular cada matéria abre ao tocar */
.mat-abre{display:none}
@media (max-width:560px){
  .mat-abre{display:block;width:100%;margin-top:10px;padding:8px;background:none;border:1px solid var(--linha);border-radius:10px;color:var(--texto);font:inherit;font-size:14px;cursor:pointer}
  .mat:not(.aberto) .mat-mais{display:none}
}

/* Falar com os alunos (25/10): IA que escreve rascunho e modelos explicados */
.fl-como{font-size:13.5px;color:var(--texto);background:var(--marca-fraca);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.fl-previa{font-size:13px;color:var(--suave);background:var(--superficie2,var(--bg));border-radius:10px;padding:8px 10px;margin:8px 0 0}
.fl-previa b{color:var(--texto)}
.fl-ia{border:1px dashed #7C3AED;background:rgba(124,58,237,.08);border-radius:12px;padding:12px;margin-top:12px}
.fl-ia > b{color:#7C3AED;font-family:var(--display)}
.fl-ia .sub{margin:4px 0 8px}
.fl-ia input{width:100%;padding:10px 12px;border:1px solid var(--linha-forte);border-radius:10px;background:var(--superficie);color:var(--texto);font:inherit}
.fl-ia-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fl-ia-btn{margin-top:10px;color:#7C3AED;border-color:rgba(124,58,237,.45)}
.fl-ia-msg{font-size:13px;color:var(--atraso);margin:8px 0 0;min-height:1em}
.fl-dados{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.fl-dados span{font-size:12.5px;background:var(--superficie2,var(--bg));border:1px solid var(--linha);border-radius:999px;padding:3px 10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fl-ia > b,:root:not([data-theme="light"]) .fl-ia-btn{color:#A78BFA}}
:root[data-theme="dark"] .fl-ia > b,:root[data-theme="dark"] .fl-ia-btn{color:#A78BFA}