/* QPolicial — visual minimalista e premium: tons neutros, um único azul de destaque, modo claro e escuro.
   Cores dos planos: administrador = vermelho, semestral = azul, anual = preto (VIP). */
:root {
  --fundo: #ffffff; --sup: #ffffff; --sup-2: #fafafa; --nevoa: #f4f4f5;
  --linha: #ececef; --linha-forte: #dcdce1;
  --tinta: #111114; --apoio: #686873; --suave: #a1a1aa;
  --acento: #3e63dd; --acento-forte: #3451b2; --acento-bg: #eef2fe; --acento-tx: #3a5bc7; --azul-claro: var(--acento-bg);
  --ok: #18794e; --ok-bg: #e9f6ef; --erro: #ce2c31; --erro-bg: #fdecec; --aviso: #ad5700; --aviso-bg: #fff4e5; --marca-texto: #fff1b8;
  --primario: #111114; --primario-hover: #2c2c33; --primario-tx: #ffffff;
  --escuro: #0e0e12; --escuro-2: #1b1b22; --escuro-tx: #f4f4f5; --escuro-apoio: #a1a1aa; --escuro-linha: rgba(255,255,255,.1);
  --adm: #e5484d; --adm-bg: #feebec; --adm-tx: #ce2c31;
  --sem: #2f9e5b; --sem-bg: #e9f6ef; --sem-tx: #18794e;
  --prof: #3e63dd; --prof-bg: #eef2fe;
  --vip: #0a0a0a; --vip-borda: #3f3f46; --vip-brilho: #d4d4d8;
  --sombra: 0 1px 2px rgba(16,16,20,.05); --sombra-alta: 0 16px 40px rgba(16,16,20,.14);
  --raio: 10px;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --lateral: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0b0b0e; --sup: #131317; --sup-2: #111115; --nevoa: #1b1b21; --linha: #25252c; --linha-forte: #34343d;
    --tinta: #ededf0; --apoio: #9d9da8; --suave: #6b6b76;
    --acento: #5b7cf5; --acento-forte: #7b95f7; --acento-bg: #182449; --acento-tx: #9eb1ff;
    --ok: #3dd68c; --ok-bg: #10291e; --erro: #ff6369; --erro-bg: #3b1219; --aviso: #ffa057; --aviso-bg: #331e0b; --marca-texto: #4a3b00;
    --primario: #ededf0; --primario-hover: #d4d4d8; --primario-tx: #111114;
    --escuro: #16161c; --escuro-2: #1f1f27;
    --adm-bg: #3b1219; --adm-tx: #ff9592; --sem-bg: #10291e; --sem-tx: #3dd68c; --prof-bg: #182449; --vip: #000000; --vip-borda: #52525b;
    --sombra: 0 1px 2px rgba(0,0,0,.4); --sombra-alta: 0 16px 40px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --fundo: #0b0b0e; --sup: #131317; --sup-2: #111115; --nevoa: #1b1b21; --linha: #25252c; --linha-forte: #34343d;
  --tinta: #ededf0; --apoio: #9d9da8; --suave: #6b6b76;
  --acento: #5b7cf5; --acento-forte: #7b95f7; --acento-bg: #182449; --acento-tx: #9eb1ff;
  --ok: #3dd68c; --ok-bg: #10291e; --erro: #ff6369; --erro-bg: #3b1219; --aviso: #ffa057; --aviso-bg: #331e0b; --marca-texto: #4a3b00;
  --primario: #ededf0; --primario-hover: #d4d4d8; --primario-tx: #111114;
  --escuro: #16161c; --escuro-2: #1f1f27;
  --adm-bg: #3b1219; --adm-tx: #ff9592; --sem-bg: #10291e; --sem-tx: #3dd68c; --prof-bg: #182449; --vip: #000000; --vip-borda: #52525b;
  --sombra: 0 1px 2px rgba(0,0,0,.4); --sombra-alta: 0 16px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--tinta); background: var(--fundo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: 1.9rem; letter-spacing: -0.03em; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
a { color: var(--acento-tx); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--acento-bg); }
.apoio { color: var(--apoio); } .peq { font-size: .875rem; } .centro { text-align: center; }
.oculto { display: none !important; }
.so-mobile { display: none; }
code { font-size: .88em; background: var(--nevoa); padding: .1em .35em; border-radius: 4px; }

/* ---------- marca ---------- */
.marca { font-weight: 700; letter-spacing: -0.03em; font-size: 1.35rem; color: #fff; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: baseline; }
.marca b { color: var(--acento); font-weight: 700; }
.marca.escura, .lateral .marca, .topo .marca { color: var(--tinta); }

/* ---------- estrutura ---------- */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--lateral) 1fr; }
.lateral { position: sticky; top: 0; height: 100vh; background: var(--sup-2); border-right: 1px solid var(--linha); color: var(--apoio); display: flex; flex-direction: column; padding: 1.5rem 1rem 1rem; overflow-y: auto; }
.lateral .marca { padding: 0 .75rem 1.5rem; }
.menu { display: flex; flex-direction: column; gap: 1px; }
.menu a { display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem; border-radius: 8px; color: var(--apoio); text-decoration: none; font-weight: 500; font-size: .93rem; }
.menu a:hover { background: var(--nevoa); color: var(--tinta); }
.menu a[aria-current="page"] { background: var(--sup); color: var(--tinta); box-shadow: 0 0 0 1px var(--linha), var(--sombra); }
.menu a .cont { margin-left: auto; font-size: .72rem; font-weight: 600; background: var(--acento); color: #fff; border-radius: 999px; padding: 0 .45rem; min-width: 1.3rem; text-align: center; }
.menu .sep { height: 1px; background: var(--linha); margin: .75rem; }
.menu .titulo-menu { font-size: .72rem; color: var(--suave); padding: .25rem .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.menu .alternar-adm { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; padding: .45rem .75rem; border-radius: 8px; text-align: left; }
.menu .alternar-adm:hover { background: var(--nevoa); color: var(--tinta); }
.menu .alternar-adm svg { transition: transform .2s; transform: rotate(-90deg); }
.menu .alternar-adm[aria-expanded="true"] svg { transform: none; }
.menu-adm { display: flex; flex-direction: column; gap: 1px; } .menu-adm[hidden] { display: none; }
.grupo-adm { font-size: .7rem; color: var(--suave); padding: .65rem .75rem .2rem; font-weight: 600; }
.lateral .rodape-lateral { margin-top: auto; padding: 1rem .75rem 0; font-size: .82rem; color: var(--apoio); }
.lateral .rodape-lateral .nome-u { margin: .75rem 0 .5rem; color: var(--tinta); font-weight: 500; }
.lateral .rodape-lateral button { background: none; border: 0; color: var(--apoio); padding: 0; cursor: pointer; display: inline-flex; gap: .5rem; align-items: center; }
.lateral .rodape-lateral button:hover { color: var(--tinta); }
.rodape-lateral .linha-rod { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.coluna { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.view { width: 100%; max-width: 1080px; margin: 0 auto; padding: 2.5rem 2.25rem 3rem; flex: 1; }
.rodape { border-top: 1px solid var(--linha); padding: 1.25rem 2.25rem; font-size: .8rem; color: var(--apoio); }
.rodape .legal { max-width: 1080px; margin: 0 auto; }
.rodape a { color: var(--apoio); }
.topo { display: none; }
.abas { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .so-mobile { display: flex; }
  .topo { display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--linha); padding: .75rem 1.1rem; padding-top: calc(.75rem + env(safe-area-inset-top)); position: sticky; top: 0; z-index: 20; }
  .topo a.icone, .topo button.icone { color: var(--tinta); display: inline-flex; padding: .25rem; background: none; border: 0; cursor: pointer; }
  .view { padding: 1.5rem 1.1rem 6rem; }
  h1 { font-size: 1.55rem; }
  .rodape { padding: 1.25rem 1.1rem 6rem; }
  .abas { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
  .abas button { all: unset; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .55rem 0 .5rem; font-size: .68rem; color: var(--apoio); font-weight: 500; cursor: pointer; }
  .abas a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .55rem 0 .5rem; font-size: .68rem; color: var(--apoio); text-decoration: none; font-weight: 500; }
  .abas a[aria-current="page"] { color: var(--tinta); font-weight: 600; }
}

/* ---------- botões e campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: var(--raio); border: 1px solid var(--primario); background: var(--primario); color: var(--primario-tx); font-weight: 600; font-size: .94rem; cursor: pointer; text-decoration: none; min-height: 44px; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; }
.btn:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sec { background: var(--sup); color: var(--tinta); border-color: var(--linha-forte); box-shadow: var(--sombra); }
.btn.sec:hover { background: var(--nevoa); border-color: var(--linha-forte); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--apoio); padding-left: .5rem; padding-right: .5rem; box-shadow: none; }
.btn.fantasma:hover { background: var(--nevoa); color: var(--tinta); }
.btn.fantasma[aria-pressed="true"] { color: var(--acento-tx); }
.btn.perigo { background: var(--sup); color: var(--erro); border-color: color-mix(in srgb, var(--erro) 35%, var(--linha)); }
.btn.perigo:hover { background: var(--erro-bg); }
.btn.acento { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn.acento:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
.btn.peq { padding: .4rem .8rem; min-height: 36px; font-size: .86rem; }
.btn.largo { width: 100%; }
/* botões sobre fundo escuro (hero, página pública) */
.btn.claro, .btn.ouro { background: #fff; border-color: #fff; color: #111114; }
.btn.claro:hover, .btn.ouro:hover { background: #e4e4e7; border-color: #e4e4e7; }
.btn.contorno { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.btn.contorno:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }
.btn-google { display: flex; width: 100%; align-items: center; justify-content: center; gap: .65rem; background: var(--sup); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: var(--raio); min-height: 46px; font-weight: 600; text-decoration: none; box-shadow: var(--sombra); }
.btn-google:hover { background: var(--nevoa); }
.ou { display: flex; align-items: center; gap: .75rem; color: var(--suave); font-size: .8rem; margin: 1.1rem 0; } .ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.linha-acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.campo { display: block; margin-bottom: 1rem; }
.campo > span { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .35rem; }
.campo small { display: block; color: var(--apoio); font-size: .8rem; margin-top: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], select, textarea {
  width: 100%; font: inherit; color: var(--tinta); background: var(--sup); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: .62rem .8rem; min-height: 44px; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.marcar { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; margin-bottom: 1rem; }
.marcar input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--acento); flex: none; }
.grade-materias { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 1rem; padding-left: .25rem; }
.grade-materias .marcar { margin-bottom: .55rem; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 600px) { .grade2, .grade3 { grid-template-columns: 1fr; } }
/* campos lado a lado são estreitos: texto de exemplo um pouco menor para caber inteiro */
.grade3 input::placeholder { font-size: .82rem; }

.seg { display: inline-flex; background: var(--nevoa); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; }
.seg a, .seg button { border: 0; background: none; padding: .42rem 1.05rem; border-radius: 999px; font-weight: 500; font-size: .9rem; color: var(--apoio); cursor: pointer; text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; gap: .35rem; }
.seg [aria-current="true"], .seg .ativo { background: var(--sup); color: var(--tinta); box-shadow: 0 0 0 1px var(--linha), var(--sombra); }

.erro-msg { background: var(--erro-bg); color: var(--erro); border-radius: 8px; padding: .65rem .85rem; font-size: .9rem; margin-bottom: 1rem; }
.ok-msg { background: var(--ok-bg); color: var(--ok); border-radius: 8px; padding: .65rem .85rem; font-size: .9rem; margin-bottom: 1rem; }
.aviso-msg { background: var(--nevoa); border: 1px solid var(--linha); border-radius: 8px; padding: .75rem .95rem; font-size: .875rem; color: var(--apoio); margin-bottom: 1rem; }
.aviso-msg strong { color: var(--tinta); }

/* ---------- cabeçalhos de página ---------- */
.cabeca { margin-bottom: 2rem; }
.cabeca .sub { color: var(--apoio); margin-top: .4rem; }
.voltar { display: inline-flex; align-items: center; gap: .35rem; color: var(--apoio); text-decoration: none; font-size: .9rem; margin-bottom: 1rem; }
.voltar:hover { color: var(--tinta); }
.secao { margin-top: 2.5rem; }
.secao > h2 { margin-bottom: .9rem; }
.secao-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }

/* ---------- listas ---------- */
.lista { border-top: 1px solid var(--linha); }
.item { display: flex; align-items: center; gap: 1rem; padding: 1rem .25rem; border-bottom: 1px solid var(--linha); color: inherit; text-decoration: none; }
a.item:hover { background: var(--sup-2); }
.item .corpo { flex: 1; min-width: 0; }
.item .nome { font-weight: 600; }
.item .meta { color: var(--apoio); font-size: .875rem; margin-top: 2px; }
.item.desligado { color: var(--apoio); }
.item .fim { display: flex; align-items: center; gap: .6rem; color: var(--apoio); flex: none; }
.tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .14rem .55rem; border-radius: 999px; background: var(--acento-bg); color: var(--acento-tx); white-space: nowrap; }
.tag.ouro, .tag.destaque { background: var(--acento-bg); color: var(--acento-tx); }
.tag.cinza { background: var(--nevoa); color: var(--apoio); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.erro { background: var(--erro-bg); color: var(--erro); }
.tag.aviso { background: var(--aviso-bg); color: var(--aviso); }
/* cargo e plano: administrador vermelho, professor azul, semestral verde, anual preto VIP */
.tag.adm { background: var(--adm); color: #fff; }
.tag.sem { background: var(--sem); color: #fff; }
.tag.prof { background: var(--prof); color: #fff; }
.tag.vip { background: linear-gradient(135deg, #2a2a30, var(--vip) 60%); color: #fff; box-shadow: inset 0 0 0 1px var(--vip-borda); letter-spacing: .03em; }
.barra { height: 4px; background: var(--linha); border-radius: 4px; overflow: hidden; margin-top: .55rem; }
.barra i { display: block; height: 100%; background: var(--acento); border-radius: 4px; }

/* ---------- login / cadastro ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, 5fr) 6fr; }
.auth-lado { background: radial-gradient(120% 80% at 0% 0%, #23232c 0%, var(--escuro) 55%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-lado .marca { font-size: 1.6rem; }
.auth-lado h1 { font-size: 2.3rem; line-height: 1.1; max-width: 14ch; font-weight: 600; letter-spacing: -0.035em; }
.auth-lado p { color: var(--escuro-apoio); max-width: 38ch; margin-top: 1rem; }
.auth-lado small { color: #71717a; display: block; max-width: 42ch; }
.auth-form { padding: 3rem 2rem; display: flex; align-items: center; justify-content: center; background: var(--fundo); }
.auth-form > div { width: 100%; max-width: 400px; }
.auth-form h2 { font-size: 1.6rem; margin-bottom: .35rem; letter-spacing: -0.03em; }
.auth-topo-mobile { display: none; }
.auth-troca { margin-top: 1.25rem; font-size: .9rem; color: var(--apoio); text-align: center; }
.senha-caixa, .campo > span.senha-caixa { position: relative; display: block; font-size: inherit; font-weight: inherit; margin-bottom: 0; } .senha-caixa input { padding-right: 2.75rem; }
.ver-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--apoio); width: 38px; height: 38px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.ver-senha:hover { color: var(--tinta); background: var(--nevoa); }
.regras-senha { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .75rem; font-size: .8rem; color: var(--apoio); }
.regras-senha li::before { content: '○'; display: inline-block; width: 1.1em; }
.regras-senha li.ok { color: var(--ok); } .regras-senha li.ok::before { content: '✓'; }
.senha-confere.ok { color: var(--ok); } .senha-confere.nao { color: var(--erro); }
.esqueci { display: block; text-align: right; font-size: .85rem; margin: -.5rem 0 1rem; }
.privacidade-box { background: var(--nevoa); border: 1px solid var(--linha); border-radius: 8px; padding: .8rem .95rem; font-size: .84rem; color: var(--apoio); margin: -.25rem 0 1rem; }
.privacidade-box strong { color: var(--tinta); }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; min-height: auto; }
  .auth-lado { display: none; }
  .auth-form { padding: 1.5rem 1.1rem 3rem; align-items: flex-start; }
  .auth-topo-mobile { display: block; background: var(--escuro); padding: 1rem 1.1rem; }
}

/* ---------- início + calendário ---------- */
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 960px) { .inicio-grade { grid-template-columns: 1fr; gap: 2rem; } }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cal-cab h2 { font-size: 1.25rem; text-transform: capitalize; }
.cal-nav { display: flex; gap: .25rem; align-items: center; }
.cal-nav button { border: 1px solid var(--linha-forte); background: var(--sup); width: 38px; height: 38px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta); }
.cal-nav button:hover { background: var(--nevoa); }
.cal-nav .hoje { width: auto; padding: 0 .8rem; font-weight: 500; font-size: .875rem; }
.cal { border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); display: grid; grid-template-columns: repeat(7, 1fr); border-radius: 10px; overflow: hidden; }
.cal .dsem { padding: .5rem .4rem; font-size: .75rem; font-weight: 600; color: var(--apoio); text-align: center; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: var(--sup-2); }
.cal .dia { position: relative; min-height: 92px; padding: .35rem .4rem; border: 0; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: var(--sup); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; overflow: hidden; color: var(--tinta); }
.cal .dia:hover { background: var(--acento-bg); }
.cal .dia.fora { background: var(--sup-2); color: var(--suave); }
.cal .dia .num { font-size: .85rem; font-weight: 500; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal .dia.hoje .num { background: var(--primario); color: var(--primario-tx); font-weight: 600; }
.cal .ev { font-size: .72rem; line-height: 1.25; padding: 2px 6px; border-radius: 4px; background: var(--acento); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cal .ev.passou { background: var(--nevoa); color: var(--apoio); }
.cal .mais { font-size: .7rem; color: var(--apoio); padding-left: 4px; }
@media (max-width: 600px) {
  .cal .dia { min-height: 52px; align-items: center; padding: .3rem .1rem; }
  .cal .ev { font-size: 0; width: 6px; height: 6px; padding: 0; border-radius: 50%; }
  .cal .eventos-dia { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
  .cal .mais { display: none; }
}
.cal .eventos-dia { display: contents; }
@media (max-width: 600px) { .cal .eventos-dia { display: flex; } }
.proximas .item { padding: .85rem .25rem; }
.data-bloco { width: 46px; text-align: center; flex: none; }
.data-bloco b { display: block; font-size: 1.35rem; line-height: 1; font-weight: 600; }
.data-bloco span { font-size: .72rem; color: var(--apoio); text-transform: uppercase; letter-spacing: .04em; }
.frase-prova { font-size: 1.05rem; color: var(--apoio); margin-top: .5rem; }
.frase-prova strong { color: var(--tinta); }
.faixa-plano { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--linha); border-radius: var(--raio); padding: .85rem 1.1rem; margin-bottom: 2rem; background: var(--sup-2); font-size: .92rem; }

/* ---------- matéria ---------- */
.abas-pag { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--linha); margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.abas-pag a { padding: .75rem 0; color: var(--apoio); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas-pag a[aria-current="true"] { color: var(--tinta); border-color: var(--tinta); font-weight: 600; }
.filtros { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: end; margin-bottom: 1rem; }
@media (max-width: 700px) { .filtros { grid-template-columns: 1fr; } }
.vazio { text-align: center; padding: 3rem 1rem; color: var(--apoio); }
.vazio h2 { color: var(--tinta); margin-bottom: .4rem; }
.bloqueio { border: 1px solid var(--linha); border-radius: 16px; padding: 2.5rem 1.5rem; text-align: center; background: var(--sup-2); max-width: 560px; margin: 2rem auto; }
.bloqueio .cadeado { width: 48px; height: 48px; border-radius: 50%; background: var(--primario); color: var(--primario-tx); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.bloqueio h2 { margin-bottom: .5rem; }
.bloqueio p { color: var(--apoio); }

/* ---------- leitor de resumo ---------- */
.leitura-cab { max-width: 720px; margin: 0 auto 1.5rem; }
.leitura-cab h1 { font-size: 2rem; }
.leitura { max-width: 720px; margin: 0 auto; font-family: var(--serif); font-size: 1.2rem; line-height: 1.7; color: var(--tinta); }
.leitura h2, .leitura h3, .leitura h4, .leitura h5 { font-family: var(--sans); line-height: 1.25; margin: 2em 0 .6em; color: var(--tinta); }
.leitura h2 { font-size: 1.5rem; } .leitura h3 { font-size: 1.25rem; } .leitura h4 { font-size: 1.1rem; }
.leitura p { margin: 0 0 1.1em; }
.leitura ul, .leitura ol { padding-left: 1.4em; margin: 0 0 1.1em; } .leitura li { margin: .25em 0; } .leitura li > ul, .leitura li > ol { margin: .2em 0 0; }
.leitura img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 1.2em auto; }
.leitura blockquote { margin: 1.2em 0; padding: .2em 1.1em; border-left: 3px solid var(--acento); background: var(--sup-2); border-radius: 0 8px 8px 0; }
.leitura blockquote p:last-child { margin-bottom: 0; }
.leitura mark { background: var(--marca-texto); color: inherit; padding: 0 .2em; border-radius: 3px; }
.leitura pre { background: var(--nevoa); padding: 1rem; border-radius: 8px; overflow-x: auto; } .leitura pre code { background: none; padding: 0; }
.leitura hr { border: 0; border-top: 1px solid var(--linha); margin: 2em 0; }
.tabela-rolavel { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--linha); border-radius: 8px; -webkit-overflow-scrolling: touch; }
.leitura table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .95rem; line-height: 1.45; min-width: 480px; }
.leitura th, .leitura td { padding: .6rem .8rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.leitura th { background: var(--nevoa); color: var(--tinta); font-weight: 600; white-space: nowrap; text-align: left; }
.leitura tr:last-child td { border-bottom: 0; }
.leitura-rodape { max-width: 720px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; }
@media (max-width: 600px) { .leitura { font-size: 1.1rem; } .leitura-cab h1 { font-size: 1.6rem; } }

/* ---------- questões ---------- */
.q-wrap { max-width: 760px; margin: 0 auto; }
.q-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; font-size: .9rem; color: var(--apoio); }
.q-prog { height: 3px; background: var(--linha); border-radius: 3px; margin-bottom: 1.75rem; overflow: hidden; } .q-prog i { display: block; height: 100%; background: var(--acento); transition: width .25s; }
.q-assunto { font-size: .8rem; color: var(--apoio); margin-bottom: .6rem; }
.q-enun { font-size: 1.15rem; line-height: 1.6; white-space: pre-wrap; margin-bottom: 1.5rem; font-weight: 500; }
.alts { display: flex; flex-direction: column; gap: .6rem; }
.alt { display: flex; gap: .85rem; align-items: flex-start; text-align: left; width: 100%; background: var(--sup); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: 12px; padding: .85rem 1rem; cursor: pointer; line-height: 1.5; transition: border-color .12s, background .12s; }
.alt:hover:not(:disabled) { border-color: var(--apoio); background: var(--sup-2); }
.alt .letra { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linha-forte); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; margin-top: 1px; color: var(--apoio); }
.alt .tx { white-space: pre-wrap; padding-top: 2px; }
.alt.sel { border-color: var(--acento); background: var(--acento-bg); } .alt.sel .letra { background: var(--acento); border-color: var(--acento); color: #fff; }
.alt.certa { border-color: var(--ok); background: var(--ok-bg); } .alt.certa .letra { background: var(--ok); border-color: var(--ok); color: #fff; }
.alt.errada { border-color: var(--erro); background: var(--erro-bg); } .alt.errada .letra { background: var(--erro); border-color: var(--erro); color: #fff; }
.alt:disabled { cursor: default; }
.q-acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.5rem; }
.q-acoes .espaco { flex: 1; }
.resultado { margin-top: 1.5rem; border-radius: 12px; padding: 1.1rem 1.25rem; }
.resultado.ok { background: var(--ok-bg); } .resultado.erro { background: var(--erro-bg); }
.resultado h3 { margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem; }
.resultado.ok h3 { color: var(--ok); } .resultado.erro h3 { color: var(--erro); }
.resultado .coment { white-space: pre-wrap; color: var(--tinta); }
.nav-q { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.5rem; }
.nav-q button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--linha-forte); background: var(--sup); font-weight: 600; font-size: .85rem; cursor: pointer; color: var(--apoio); }
.nav-q button.resp { background: var(--acento-bg); color: var(--acento-tx); border-color: var(--acento-bg); }
.nav-q button.atual { background: var(--primario); color: var(--primario-tx); border-color: var(--primario); }
.relogio { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.1rem; color: var(--tinta); display: inline-flex; gap: .4rem; align-items: center; }
.relogio.urgente { color: var(--erro); }
.nota { display: flex; align-items: baseline; gap: .75rem; margin: .5rem 0 2rem; flex-wrap: wrap; }
.nota b { font-size: 3.2rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--tinta); }
.revisao details { border-bottom: 1px solid var(--linha); padding: .85rem .25rem; }
.revisao summary { cursor: pointer; display: flex; gap: .75rem; align-items: baseline; list-style: none; }
.revisao summary::-webkit-details-marker { display: none; }
.revisao summary .t { flex: 1; font-weight: 500; }
.revisao .det { padding: .85rem 0 .25rem 1.9rem; font-size: .95rem; }
.revisao .det .alts { gap: .4rem; }

/* ---------- desempenho ---------- */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.numeros > div { padding: 1.25rem 0 1.25rem 1.25rem; border-left: 1px solid var(--linha); } .numeros > div:first-child { border-left: 0; padding-left: 0; }
.numeros b { display: block; font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.numeros span { color: var(--apoio); font-size: .875rem; }
.hbar-linha { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 120px; gap: 1rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--linha); font-size: .92rem; }
.hbar-linha .trilho { height: 8px; background: var(--nevoa); border-radius: 0 4px 4px 0; position: relative; }
.hbar-linha .trilho i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acento); border-radius: 0 4px 4px 0; }
.hbar-linha .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--apoio); }
.hbar-linha .val b { color: var(--tinta); font-weight: 600; }
@media (max-width: 700px) { .hbar-linha { grid-template-columns: 1fr 90px; } .hbar-linha .trilho { grid-column: 1 / -1; order: 3; } }
.colunas { display: flex; align-items: flex-end; gap: 6px; height: 150px; border-bottom: 1px solid var(--linha-forte); padding-top: 10px; }
.colunas .col { flex: 1; display: flex; align-items: flex-end; height: 100%; cursor: default; }
.colunas .col i { display: block; width: 100%; background: var(--acento); border-radius: 4px 4px 0 0; min-height: 2px; }
.colunas .col:hover i { background: var(--acento-forte); }
.colunas-rot { display: flex; gap: 6px; font-size: .7rem; color: var(--apoio); margin-top: .35rem; }
.colunas-rot span { flex: 1; text-align: center; }
#dica { position: fixed; z-index: 100; background: var(--primario); color: var(--primario-tx); font-size: .8rem; padding: .35rem .6rem; border-radius: 6px; pointer-events: none; max-width: 240px; }

/* ---------- planos ---------- */
.planos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 780px; }
@media (max-width: 640px) { .planos { grid-template-columns: 1fr; } }
.plano { border: 1px solid var(--linha-forte); border-radius: 16px; padding: 1.5rem; position: relative; background: var(--sup); display: flex; flex-direction: column; box-shadow: var(--sombra); }
.plano.p-semestral { border-top: 3px solid var(--sem); }
.plano.destaque, .plano.p-anual { background: linear-gradient(160deg, #26262d, var(--vip) 55%); color: #f4f4f5; border-color: var(--vip-borda); }
.plano.p-anual .mes, .plano.p-anual li { color: #d4d4d8; }
.plano.p-anual li svg { color: #fff; }
.plano.p-anual .btn { background: #fff; border-color: #fff; color: #0a0a0a; }
.plano.p-anual .btn:hover { background: #e4e4e7; }
.plano .selo { position: absolute; top: -12px; left: 1.25rem; background: var(--vip); color: #fff; font-size: .72rem; font-weight: 600; padding: .22rem .75rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--vip-borda); letter-spacing: .04em; text-transform: uppercase; }
.plano h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.plano .preco { font-size: 2.3rem; font-weight: 600; letter-spacing: -0.04em; margin: .6rem 0 .1rem; }
.plano .preco s { font-size: 1rem; color: var(--apoio); font-weight: 500; margin-right: .4rem; letter-spacing: 0; }
.plano.p-anual .preco s { color: #a1a1aa; }
.plano .mes { color: var(--apoio); font-size: .9rem; margin-bottom: 1rem; }
.plano ul { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .92rem; flex: 1; } .plano li { padding: .3rem 0; display: flex; gap: .5rem; } .plano li svg { color: var(--ok); flex: none; margin-top: 3px; }
.cupom-linha { display: flex; gap: .5rem; max-width: 420px; margin-top: 1rem; } .cupom-linha input { text-transform: uppercase; } .cupom-linha input::placeholder { text-transform: none; }
.compra-resumo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--linha); border-radius: 12px; padding: .9rem 1rem; background: var(--sup-2); }
.cupom-ok { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .88rem; color: var(--ok); font-weight: 500; }
.tabela-comp { width: 100%; border-collapse: collapse; font-size: .93rem; max-width: 780px; }
.tabela-comp th, .tabela-comp td { padding: .7rem .5rem; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela-comp th { font-weight: 600; color: var(--apoio); font-size: .8rem; }
.passos { counter-reset: p; list-style: none; padding: 0; margin: 0; max-width: 640px; }
.passos li { counter-increment: p; display: flex; gap: .9rem; padding: .7rem 0; align-items: flex-start; }
.passos li::before { content: counter(p); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--nevoa); color: var(--tinta); font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.pix-chave { display: flex; gap: .5rem; align-items: center; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 8px; padding: .5rem .5rem .5rem .85rem; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; word-break: break-all; }
/* pagamento Pix automático */
.pix-pagar { text-align: center; }
.pix-qr { display: block; width: 220px; height: 220px; margin: .5rem auto 1rem; border-radius: 12px; background: #fff; padding: 8px; border: 1px solid var(--linha); image-rendering: pixelated; }
.pix-valor { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; }
.pix-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--apoio); margin: .75rem 0; }
.pix-status .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); animation: pulso 1.2s infinite ease-in-out; }
.pix-pago { color: var(--ok); }
.pix-pago .selo-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: inline-grid; place-items: center; margin-bottom: .75rem; }
@keyframes pulso { 50% { opacity: .25; transform: scale(.8); } }

/* ---------- texto legal ---------- */
.legal-texto { max-width: 720px; } .legal-texto h2 { margin: 1.8rem 0 .6rem; } .legal-texto li { margin: .35rem 0; }

/* ---------- diálogo e aviso ---------- */
dialog { border: 1px solid var(--linha); border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-shadow: var(--sombra-alta); color: var(--tinta); background: var(--sup); }
dialog.largo { width: min(760px, calc(100vw - 2rem)); }
dialog::backdrop { background: rgba(10,10,14,.5); backdrop-filter: blur(2px); }
.dlg { padding: 1.5rem; } .dlg-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; } .dlg-cab h2 { font-size: 1.2rem; }
.dlg-fechar { border: 0; background: var(--nevoa); color: var(--tinta); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
#toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
#toast div { background: var(--primario); color: var(--primario-tx); padding: .7rem 1.1rem; border-radius: 10px; font-size: .92rem; box-shadow: var(--sombra-alta); max-width: min(92vw, 420px); }
#toast div.erro { background: var(--erro); color: #fff; }
@media (max-width: 860px) { #toast { bottom: 5.5rem; } }
.carregando { padding: 4rem 0; text-align: center; color: var(--apoio); }

/* ---------- admin ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-size: .76rem; color: var(--apoio); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.tabela td { padding: .7rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:hover td { background: var(--sup-2); }
.tabela-scroll { overflow-x: auto; }
.cards-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.cards-num > a, .cards-num > div { padding: 1.1rem 0 1.1rem 1.1rem; border-left: 1px solid var(--linha); color: inherit; text-decoration: none; } .cards-num > :first-child { border-left: 0; padding-left: 0; }
.cards-num > a:hover b { color: var(--acento-tx); }
.cards-num b { display: block; font-size: 1.8rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; } .cards-num span { color: var(--apoio); font-size: .85rem; }
.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .editor { grid-template-columns: 1fr; } }
.editor textarea { min-height: 460px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.55; }
.barra-ed { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.barra-ed button { border: 1px solid var(--linha-forte); background: var(--sup); border-radius: 6px; padding: .3rem .6rem; font-size: .8rem; cursor: pointer; font-weight: 500; min-height: 32px; } .barra-ed button:hover { background: var(--nevoa); }
.previa { border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem 1.5rem; min-height: 200px; max-height: 620px; overflow: auto; }
.previa .leitura { font-size: 1.05rem; }
.alt-form { display: grid; grid-template-columns: 34px 1fr; gap: .6rem; align-items: start; margin-bottom: .6rem; }
.alt-form label.radio { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 600; font-size: .8rem; padding-top: .55rem; cursor: pointer; }
.alt-form label.radio input { accent-color: var(--ok); width: 18px; height: 18px; }
.alt-form textarea { min-height: 60px; }
.sticky-salvar { position: sticky; bottom: 0; background: var(--fundo); border-top: 1px solid var(--linha); padding: .85rem 0; margin-top: 1.5rem; display: flex; gap: .6rem; flex-wrap: wrap; z-index: 5; }
@media (max-width: 860px) { .sticky-salvar { bottom: 58px; } }
.lista-simples { list-style: none; margin: 0; padding: 0; } .lista-simples li { padding: .65rem 0; border-bottom: 1px solid var(--linha); }
.zona-import { border: 1.5px dashed var(--linha-forte); border-radius: 12px; padding: 1.25rem; }
.zona-import textarea { min-height: 140px; font-family: ui-monospace, Menlo, monospace; font-size: .82rem; white-space: pre; }

@media print {
  .lateral, .topo, .abas, .rodape, .leitura-rodape, .voltar, .nao-imprimir, #toast { display: none !important; }
  :root { --fundo: #fff; --tinta: #000; }
  .app { display: block; } .view { padding: 0; max-width: none; }
  .leitura { font-size: 12pt; max-width: none; } .leitura-cab { max-width: none; }
  .leitura th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .leitura img { max-height: 9cm; }
}

/* ---------- início: hero, medidor, calendário compacto ---------- */
.hero { background: radial-gradient(140% 120% at 100% 0%, var(--escuro-2) 0%, var(--escuro) 60%); color: var(--escuro-tx); border-radius: 18px; padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 2rem; border: 1px solid var(--escuro-linha); }
.hero h1 { color: #fff; margin-top: .75rem; }
.hero .frase-prova { color: var(--escuro-apoio); }
.hero .frase-prova strong { color: #fff; }
.hero-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; }
.hero-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.selo-plano { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .32rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.06); }
.selo-plano.p-administrador { background: var(--adm); border-color: var(--adm); }
.selo-plano.p-semestral { background: var(--sem); border-color: var(--sem); }
.selo-plano.p-professor { background: var(--prof); border-color: var(--prof); }
.selo-plano.p-anual { background: linear-gradient(135deg, #2c2c33, #000 60%); border-color: #52525b; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.4); }
.selo-plano.p-anual::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #fff, #a1a1aa); }
.hero-plano { margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--escuro-linha); }
.plano-frase { color: #d4d4d8; margin-bottom: 1rem; }
.plano-frase strong, .medidor strong { color: #fff; }
.aviso-venc { color: #ffb86b !important; }
.medidor .barras { display: flex; gap: 6px; margin-bottom: .75rem; max-width: 420px; }
.medidor .barras i { flex: 1; height: 8px; border-radius: 3px; background: rgba(255,255,255,.14); }
.medidor .barras i.on { background: #fff; }
.medidor p { color: #d4d4d8; font-size: 1.02rem; }
.mini-nums { display: flex; gap: 2rem; flex-wrap: wrap; }
.mini-nums b { display: block; font-size: 1.6rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.mini-nums span { font-size: .8rem; color: var(--escuro-apoio); }
.cal-topo { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.cal-mini .cal-cab h2 { font-size: 1rem; }
.cal-mini .cal .dia { min-height: 58px; align-items: center; padding: .3rem .1rem; }
.cal-mini .cal .ev { font-size: 0; width: 7px; height: 7px; padding: 0; border-radius: 50%; }
.cal-mini .cal .eventos-dia { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.cal-mini .cal .mais { display: none; }
.item.destaque { background: var(--acento-bg); border-radius: 10px; border-bottom-color: transparent; margin-bottom: 4px; padding-left: .8rem; padding-right: .8rem; }
.destrave { margin-top: 2.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; border: 1px solid var(--linha); border-radius: 16px; padding: 1.5rem; background: var(--sup-2); }
.destrave h2 { margin-bottom: .35rem; }
.destrave p { color: var(--apoio); max-width: 46ch; }
.destrave-precos { display: flex; gap: .75rem; flex-wrap: wrap; }
.destrave-precos a { display: block; text-decoration: none; color: var(--tinta); background: var(--sup); border: 1px solid var(--linha-forte); border-radius: 12px; padding: .8rem 1.1rem; min-width: 150px; }
.destrave-precos a.p-semestral { border-top: 3px solid var(--sem); }
.destrave-precos a.melhor { background: linear-gradient(160deg, #26262d, var(--vip) 60%); color: #fff; border-color: var(--vip-borda); }
.destrave-precos a.melhor span { color: #a1a1aa; }
.destrave-precos span { display: block; font-size: .78rem; color: var(--apoio); }
.destrave-precos b { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
@media (max-width: 600px) { .hero { padding: 1.25rem 1.1rem; } .hero-acoes .btn { flex: 1; } .mini-nums { gap: 1.25rem; } }

/* ---------- PDF dos resumos e importação ---------- */
.pdf-caixa { margin-bottom: 1.5rem; }
.pdf-vista { display: block; width: 100%; height: 78vh; min-height: 480px; margin-top: 1rem; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--nevoa); }
@media (max-width: 820px) { .pdf-vista { display: none; } }
.pdf-admin { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px dashed var(--linha-forte); border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.25rem; background: var(--sup-2); }
.pdf-admin p { margin: .15rem 0 0; }
.formato-texto { margin: .5rem 0 1rem; }
.formato-texto summary { cursor: pointer; color: var(--acento-tx); font-weight: 500; }
.formato-texto pre { background: var(--sup-2); border: 1px solid var(--linha); border-radius: 8px; padding: .9rem 1rem; font-size: .85rem; overflow-x: auto; margin-top: .6rem; }

/* =====================================================================
   Componentes: home, indicação, revisão, admin, página pública
   ===================================================================== */
.link-forte { color: var(--tinta); text-decoration: none; } .link-forte:hover { text-decoration: underline; }
.txt-aviso { color: var(--aviso); }
.riscado td { color: var(--apoio); text-decoration: line-through; } .riscado td .tag, .riscado td .btn { text-decoration: none; }
.escuro { color: var(--apoio); }
.duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grande { padding: .9rem 1.5rem; font-size: 1.02rem; }
.curta { width: 60%; }
@media (max-width: 860px) { .duplo { grid-template-columns: 1fr; gap: 1.5rem; } }

/* esqueleto de carregamento + transição suave */
.esqueleto { display: grid; gap: .9rem; max-width: 640px; }
.esqueleto i { display: block; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--nevoa) 25%, var(--linha) 50%, var(--nevoa) 75%); background-size: 200% 100%; animation: brilho 1.3s infinite linear; }
.esqueleto .e1 { height: 34px; width: 45%; } .esqueleto .e2 { width: 80%; } .esqueleto .e3 { height: 56px; }
@keyframes brilho { to { background-position: -200% 0; } }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main > *, .conteudo > * { animation: entra .32s cubic-bezier(.2,.8,.2,1) both; }
.item, .teaser, .card-dia, .card-rev, .convite-card { transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }

/* chip do plano e dias */
.selo-linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dias-plano { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: inherit; opacity: .9; }
.dias-plano b { font-size: 1.05rem; }
.dias-plano.acaba { color: #ffb86b; }
.chip-mini { display: inline-flex; font-size: .75rem; font-weight: 600; }
.rodape-lateral .chip-plano { max-width: 100%; flex-wrap: wrap; row-gap: .1rem; }
.chip-plano { display: inline-flex; align-items: center; gap: .55rem; padding: .36rem .75rem; border-radius: 999px; background: var(--nevoa); color: var(--tinta); text-decoration: none; font-size: .82rem; border: 1px solid var(--linha); }
.chip-plano .cp-rot { font-weight: 700; } .chip-plano .cp-det { display: inline-flex; align-items: center; gap: .3rem; opacity: .85; }
.chip-plano.adm { background: var(--adm); color: #fff; border-color: var(--adm); }
.chip-plano.semestral { background: var(--sem); color: #fff; border-color: var(--sem); }
.chip-plano.prof { background: var(--prof); color: #fff; border-color: var(--prof); }
.chip-plano.anual { background: linear-gradient(135deg, #2c2c33, #000 60%); color: #fff; border-color: #52525b; }
.chip-plano.acaba .cp-det { color: #ffd7a8; opacity: 1; }
.chip-plano.vencido { background: var(--aviso-bg); color: var(--aviso); border-color: transparent; }
.chip-mini .chip-plano .cp-det { display: none; }
.estado-plano { align-items: center; }

/* mural de avisos */
.mural { display: flex; align-items: center; gap: .75rem; background: var(--acento-bg); border: 1px solid color-mix(in srgb, var(--acento) 20%, transparent); border-radius: var(--raio); padding: .7rem .9rem; margin-bottom: .75rem; }
.m-ico { color: var(--acento-tx); display: flex; } .m-tx { flex: 1; font-size: .93rem; } .m-tx a { color: var(--acento-tx); font-weight: 600; }
.m-x { border: 0; background: none; cursor: pointer; color: var(--apoio); padding: .35rem; border-radius: 6px; min-width: 32px; min-height: 32px; } .m-x:hover { background: rgba(0,0,0,.06); }

/* cartões da home */
.card-dia, .card-rev, .convite-card, .rev-card, .card-seq { border: 1px solid var(--linha); border-radius: 16px; padding: 1.25rem 1.35rem; margin-bottom: 1rem; background: var(--sup); box-shadow: var(--sombra); }
.cd-cab, .card-rev, .convite-card, .vazio-dia, .rev-topo { display: flex; gap: 1rem; align-items: flex-start; }
.card-rev, .convite-card { align-items: center; }
.card-rev > div, .convite-card > div, .cd-cab > div, .vazio-dia > div, .rev-topo > div { flex: 1; min-width: 0; }
.card-rev p, .convite-card p, .cd-cab p, .vazio-dia p { margin: .25rem 0 0; color: var(--apoio); font-size: .92rem; }
.cd-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--nevoa); color: var(--tinta); display: grid; place-items: center; }
a.card-rev { color: inherit; text-decoration: none; }
.card-rev.tem, .rev-card.tem { border-color: color-mix(in srgb, var(--acento) 35%, var(--linha)); } .card-rev.tem .cd-ico, .rev-card.tem .cd-ico { background: var(--acento-bg); color: var(--acento-tx); }
a.card-rev:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.convite-card { background: radial-gradient(140% 120% at 100% 0%, var(--escuro-2), var(--escuro) 60%); border-color: var(--escuro-linha); color: #fff; }
.convite-card p { color: var(--escuro-apoio); } .convite-card .cd-ico { background: rgba(255,255,255,.1); color: #fff; } .convite-card .btn.sec { background: #fff; color: #111114; border-color: #fff; }
.tarefas { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.tarefa { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--linha); border-radius: 10px; text-decoration: none; color: inherit; }
.tarefa:hover { border-color: var(--linha-forte); background: var(--sup-2); }
.t-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--nevoa); color: var(--tinta); display: grid; place-items: center; flex: none; }
.tarefa.feita { color: var(--apoio); } .tarefa.feita .t-ico { background: var(--ok-bg); color: var(--ok); } .tarefa.feita .t-tx { text-decoration: line-through; }
.t-tx { flex: 1; font-weight: 500; } .t-tx small { display: block; color: var(--apoio); font-weight: 400; font-size: .8rem; text-decoration: none; }
.t-seta { color: var(--apoio); display: flex; }
.cd-prog { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.1rem; font-size: .85rem; color: var(--apoio); } .cd-prog small { display: block; margin-top: .3rem; }
.vazio-dia { align-items: center; }
.rev-card .rev-topo p { margin: .25rem 0 0; color: var(--apoio); font-size: .92rem; }
.teaser-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-top: .8rem; }
.teaser { position: relative; border: 1px solid var(--linha); border-radius: 14px; padding: 1rem; text-decoration: none; color: inherit; background: var(--sup-2); }
.teaser:hover { border-color: var(--linha-forte); background: var(--sup); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.teaser p { margin: .3rem 0 0; font-size: .85rem; color: var(--apoio); }
.t-i { color: var(--acento-tx); display: block; margin-bottom: .5rem; } .t-lock { position: absolute; top: .8rem; right: .8rem; color: var(--suave); }

/* sequência de dias e meta diária */
.card-seq { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; }
.seq-num { display: flex; align-items: center; gap: .65rem; }
.seq-num .fogo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--nevoa); color: var(--suave); }
.seq-num .fogo.on { background: linear-gradient(135deg, #ff8a3d, #e5484d); color: #fff; }
.seq-num b { font-size: 1.6rem; line-height: 1; letter-spacing: -0.03em; display: block; }
.seq-num span { font-size: .8rem; color: var(--apoio); }
.seq-semana { display: flex; gap: .35rem; justify-content: center; }
.seq-semana i { width: 28px; height: 28px; border-radius: 8px; background: var(--nevoa); display: grid; place-items: center; font-style: normal; font-size: .68rem; color: var(--apoio); font-weight: 600; }
.seq-semana i.on { background: var(--acento); color: #fff; }
.seq-semana i.hoje { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3.5px var(--acento); }
.meta-anel { --p: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--acento) calc(var(--p) * 1%), var(--nevoa) 0); display: grid; place-items: center; position: relative; text-decoration: none; color: var(--tinta); }
.meta-anel::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--sup); }
.meta-anel span { position: relative; font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.1; }
.meta-anel span small { display: block; font-weight: 500; color: var(--apoio); font-size: .62rem; }
.meta-anel.batida { background: conic-gradient(var(--ok) 100%, var(--nevoa) 0); }
@media (max-width: 600px) { .card-seq { grid-template-columns: 1fr auto; gap: 1rem; } .seq-meio { grid-column: 1 / -1; order: 3; } .seq-semana { justify-content: space-between; } }
.convite-card > div, .card-rev > div { flex: 1 1 220px; }

/* resumo bloqueado */
.previa-bloqueada { position: relative; max-width: 720px; margin: 0 auto; }
.previa-fade { height: 120px; margin-top: -120px; position: relative; background: linear-gradient(transparent, var(--fundo)); }
.previa-pdf { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--linha-forte); border-radius: 12px; color: var(--apoio); }

/* indicação */
.indicar-hero { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: radial-gradient(140% 120% at 100% 0%, var(--escuro-2), var(--escuro) 60%); color: #fff; border-radius: 18px; padding: 1.5rem 1.6rem; margin-bottom: 1.5rem; }
.indicar-hero .apoio { color: var(--escuro-apoio); }
.ih-rot { font-size: .75rem; color: var(--escuro-apoio); text-transform: uppercase; letter-spacing: .1em; } .ih-dias { font-size: 1rem; margin-top: .2rem; } .ih-dias b { font-size: 2.6rem; font-weight: 600; color: #fff; margin-right: .2rem; letter-spacing: -0.04em; }
.ih-total { text-align: right; } .ih-total b { display: block; font-size: 1.8rem; color: #fff; } .ih-total span { font-size: .85rem; color: var(--escuro-apoio); }

/* ranking */
.rank-tab { width: 100%; border-collapse: collapse; }
.rank-tab td { padding: .7rem .5rem; border-bottom: 1px solid var(--linha); }
.rank-tab .pos { width: 48px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--apoio); }
.rank-tab tr.top1 .pos, .rank-tab tr.top2 .pos, .rank-tab tr.top3 .pos { color: var(--tinta); }
.rank-tab .medalha { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .78rem; color: #fff; }
.rank-tab tr.top1 .medalha { background: linear-gradient(135deg, #2c2c33, #000); box-shadow: inset 0 0 0 1px #52525b; }
.rank-tab tr.top2 .medalha { background: var(--acento); } .rank-tab tr.top3 .medalha { background: var(--suave); }
.rank-tab tr.eu td { background: var(--acento-bg); font-weight: 600; }
.rank-tab .num { text-align: right; font-variant-numeric: tabular-nums; }

/* flashcards */
.flash-area { max-width: 620px; margin: 0 auto; }
.flash { perspective: 1200px; cursor: pointer; margin: 1rem 0 1.25rem; }
.flash-in { position: relative; min-height: 280px; transition: transform .45s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.flash.virada .flash-in { transform: rotateY(180deg); }
.flash-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--linha-forte); border-radius: 18px; background: var(--sup); box-shadow: var(--sombra-alta); padding: 2rem 1.75rem; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 1.2rem; line-height: 1.5; white-space: pre-wrap; overflow: auto; }
.flash-face small { position: absolute; top: 1rem; left: 0; right: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); }
.flash-verso { transform: rotateY(180deg); background: var(--sup-2); }
.flash-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.flash-botoes .btn { min-height: 52px; }
.flash-info { display: flex; justify-content: space-between; font-size: .85rem; color: var(--apoio); }
@media (prefers-reduced-motion: reduce) { .flash-in { transition: none; } }

/* dúvidas */
.duv { border-bottom: 1px solid var(--linha); padding: .85rem 0; }
.duv:last-child { border-bottom: 0; }
.duv .p { font-weight: 500; } .duv .quem { font-size: .78rem; color: var(--apoio); margin-bottom: .25rem; }
.duv .r { margin-top: .55rem; padding: .65rem .85rem; background: var(--sup-2); border-left: 3px solid var(--acento); border-radius: 0 8px 8px 0; white-space: pre-wrap; font-size: .93rem; }
.duv .r b { display: block; font-size: .75rem; color: var(--acento-tx); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; }

/* admin */
/* topo do admin: 5 áreas e, embaixo, as páginas da área atual */
.admin-nav { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; margin-bottom: .6rem; }
.admin-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; color: var(--apoio); text-decoration: none; white-space: nowrap; border-radius: 999px; font-size: .9rem; font-weight: 500; }
.admin-nav a:hover { color: var(--tinta); background: var(--nevoa); }
.admin-nav a[aria-current="page"] { color: var(--primario-tx); background: var(--primario); font-weight: 600; }
.admin-sub { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linha); margin-bottom: 1.75rem; padding-left: .85rem; }
.admin-sub a { padding: .55rem 0; color: var(--apoio); text-decoration: none; white-space: nowrap; font-size: .88rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-sub a:hover { color: var(--tinta); } .admin-sub a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 600; }
.admin-nav + :not(.admin-sub) { margin-top: 1.25rem; }
.admin-sub::-webkit-scrollbar, .admin-nav::-webkit-scrollbar, .abas-pag::-webkit-scrollbar { display: none; }
.acoes-rapidas { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.atencao { border: 1px solid color-mix(in srgb, var(--aviso) 30%, var(--linha)); background: var(--aviso-bg); border-radius: 14px; padding: 1rem 1.2rem; } .atencao.tudo-ok { border-color: var(--linha); background: var(--ok-bg); }
.atencao .lista { border-top-color: color-mix(in srgb, var(--aviso) 20%, transparent); margin-top: .5rem; } .atencao .item { padding: .7rem .1rem; border-bottom-color: color-mix(in srgb, var(--aviso) 20%, transparent); } .atencao a.item:hover { background: transparent; }
.a-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--sup); color: var(--aviso); display: grid; place-items: center; flex: none; }
.chips-filtro { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips-filtro a { padding: .38rem .8rem; border: 1px solid var(--linha-forte); border-radius: 999px; text-decoration: none; color: var(--tinta); font-size: .86rem; background: var(--sup); }
.chips-filtro a em { font-style: normal; color: var(--apoio); margin-left: .25rem; } .chips-filtro a[aria-current="true"] { background: var(--primario); color: var(--primario-tx); border-color: var(--primario); } .chips-filtro a[aria-current="true"] em { color: inherit; opacity: .7; }
.caixa-form { border: 1px solid var(--linha); border-radius: 14px; padding: 1.25rem; background: var(--sup-2); max-width: 680px; }
.cob { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--apoio); } .cob .barra { flex: 1; margin: 0; } .barra i.ok { background: var(--ok); } .meta-q { max-width: 160px; }
.plano-adm { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--linha); border-radius: 16px; padding: 1.2rem 1.35rem; } .plano-adm.ativo { border-color: color-mix(in srgb, var(--acento) 35%, var(--linha)); background: var(--sup-2); }
.pa-rot { font-size: .72rem; color: var(--apoio); text-transform: uppercase; letter-spacing: .1em; } .pa-linha { margin-top: .3rem; }
.venc { flex-wrap: wrap; }
.mover { display: flex; flex-direction: column; gap: 2px; } .mover button { border: 1px solid var(--linha-forte); background: var(--sup); border-radius: 4px; font-size: .6rem; cursor: pointer; padding: 1px 6px; color: var(--apoio); } .mover button:disabled { opacity: .3; cursor: default; }
.corpo-link { color: inherit; text-decoration: none; }
.sel-q { display: flex; align-items: center; } .sel-q input, .sel-tudo input { width: 18px; height: 18px; accent-color: var(--acento); } .sel-tudo { gap: .75rem; background: var(--sup-2); }
.lote-barra { position: sticky; bottom: 1rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; background: var(--primario); color: var(--primario-tx); padding: .7rem 1rem; border-radius: 12px; margin: 1rem 0; box-shadow: var(--sombra-alta); }
.lote-barra[hidden] { display: none; } .lote-barra select { width: auto; }
.integracoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.integracoes > div { border: 1px solid var(--linha); border-radius: 12px; padding: .8rem .9rem; display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; background: var(--sup); }
.integracoes .st { width: 10px; height: 10px; border-radius: 50%; margin-top: .35rem; flex: none; background: var(--suave); } .integracoes .st.on { background: var(--ok); }
.integracoes small { display: block; color: var(--apoio); }
.cupom-cod { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: .04em; }

/* tema */
.tema-escolha { display: inline-flex; }

/* página pública */
.lp { background: var(--fundo); color: var(--tinta); }
.lp-wrap { width: min(1080px, 100% - 2.5rem); margin: 0 auto; } .lp-estreito { max-width: 760px; }
.lp-topo { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--escuro) 85%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--escuro-linha); } .lp-topo-in { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 0; }
.lp-nav { display: flex; gap: 1.25rem; margin-left: auto; } .lp-nav a { color: #a1a1aa; text-decoration: none; font-size: .92rem; } .lp-nav a:hover { color: #fff; }
.lp-topo-acoes { display: flex; gap: .5rem; }
.lp-hero { background: radial-gradient(90% 70% at 85% 10%, #23232d 0%, transparent 60%), var(--escuro); color: #fff; padding: 5rem 0 5.5rem; }
.lp-hero-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.lp-selo { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; letter-spacing: .02em; color: #d4d4d8; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); border-radius: 999px; padding: .32rem .85rem; margin-bottom: 1.3rem; }
.lp-selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 10px var(--acento); }
.lp-hero h1 { font-family: var(--sans); font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.045em; margin-bottom: 1.1rem; }
.lp-hero h1 em { font-style: normal; color: #a1a1aa; }
.lp-hero p { color: #a1a1aa; font-size: 1.1rem; max-width: 44ch; } .lp-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.8rem 0 1rem; } .lp-mini { font-size: .85rem !important; color: #71717a !important; } .lp-mini.escuro { color: var(--apoio) !important; text-align: center; margin-top: 1.5rem; }
.lp-cartao { background: var(--sup); color: var(--tinta); border-radius: 20px; padding: 1.3rem; box-shadow: 0 30px 80px rgba(0,0,0,.5); border: 1px solid var(--linha); transform: rotate(1.5deg); }
.lp-cartao-tag { font-size: .7rem; color: var(--apoio); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; } .lp-q small { color: var(--apoio); }
.lp-linhas { display: grid; gap: .4rem; margin: .7rem 0 1rem; } .lp-linhas i, .lp-alts i { display: block; height: 9px; border-radius: 5px; background: var(--linha); } .lp-linhas i.curta { width: 55%; }
.lp-alts { display: grid; gap: .45rem; } .lp-alts span { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--linha); border-radius: 9px; padding: .55rem .7rem; } .lp-alts span i { flex: 1; } .lp-alts b { width: 22px; height: 22px; border-radius: 50%; background: var(--nevoa); display: grid; place-items: center; font-size: .75rem; }
.lp-alts .certa { border-color: var(--ok); background: var(--ok-bg); } .lp-alts .certa b { background: var(--ok); color: #fff; }
.lp-mini-stats { display: flex; gap: 1.5rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linha); } .lp-mini-stats small { display: block; color: var(--apoio); font-size: .75rem; }
.lp-faixa { background: var(--escuro); border-top: 1px solid var(--escuro-linha); } .lp-numeros { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 1.6rem 0; } .lp-numeros b { display: block; color: #fff; font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; } .lp-numeros span { color: #a1a1aa; font-size: .85rem; }
.lp-tropa .lp-wrap { text-align: center; }
.lp-selo-c { display: inline-block; margin-bottom: .75rem; color: var(--tinta); border: 1px solid var(--linha); background: var(--sup); padding: .25rem .7rem; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.lp-tropa-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; text-align: left; }
.lp-vit { background: var(--sup); border: 1px solid var(--linha); border-radius: 18px; padding: 1.25rem; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.lp-vit h3 { margin: 1rem 0 .3rem; } .lp-vit p { color: var(--apoio); font-size: .92rem; margin: 0; }
.lp-vit > :first-child { min-height: 150px; border-radius: 14px; background: var(--sup-2); border: 1px solid var(--linha); padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
.lp-emb { flex-direction: row !important; flex-wrap: nowrap; gap: .1rem; align-items: center; justify-content: center !important; }
.lp-emb .medalha.mini { background: none !important; border: 0 !important; box-shadow: none !important; animation: none; width: 58px; padding: .25rem 0; }
.lp-emb .medalha.mini .md-disco { width: 48px; height: 48px; }
.lp-emb .medalha.mini span:last-child { color: var(--r); font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.lp-emb .n-mitica span:last-child { color: var(--tinta) !important; }
.lmp-topo { display: flex; align-items: center; gap: .6rem; } .lmp-topo small { display: block; color: var(--apoio); font-size: .75rem; }
.lmp-seq { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; color: #ea580c; background: color-mix(in srgb, #f97316 14%, transparent); padding: .2rem .5rem; border-radius: 99px; }
.lmp-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .8rem 0; } .lmp-nums div { background: var(--sup); border: 1px solid var(--linha); border-radius: 10px; padding: .4rem .5rem; } .lmp-nums b { display: block; font-size: 1rem; } .lmp-nums small { color: var(--apoio); font-size: .7rem; }
.lmp-mapa { display: grid; grid-template-columns: repeat(21, 1fr); gap: 3px; } .lmp-mapa i { aspect-ratio: 1; border-radius: 2px; background: var(--nevoa); }
.lmp-mapa .m1 { background: color-mix(in srgb, var(--sem) 30%, var(--nevoa)); } .lmp-mapa .m2 { background: color-mix(in srgb, var(--sem) 55%, var(--nevoa)); } .lmp-mapa .m3 { background: color-mix(in srgb, var(--sem) 80%, var(--nevoa)); } .lmp-mapa .m4 { background: var(--sem); }
.lp-mock-chat { gap: .5rem; } .lmc { max-width: 88%; } .lmc p { margin: .2rem 0 0; background: var(--sup); border: 1px solid var(--linha); padding: .45rem .7rem; border-radius: 12px 12px 12px 4px; font-size: .85rem; }
.lmc.eu { align-self: flex-end; } .lmc.eu p { background: var(--primario); color: var(--primario-tx); border-color: transparent; border-radius: 12px 12px 4px 12px; }
.lmc .tag { font-size: .6rem; }
.lp-sec { padding: 5rem 0; } .lp-clara { background: var(--sup-2); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); } .lp-sec h2 { font-family: var(--sans); font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 600; text-align: center; letter-spacing: -0.04em; } .lp-sub { text-align: center; color: var(--apoio); margin: .6rem 0 2.4rem; }
.lp-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .lp-passos > div { text-align: center; padding: 0 .5rem; } .lp-passos span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--primario); color: var(--primario-tx); font-weight: 600; margin-bottom: .8rem; } .lp-passos p { color: var(--apoio); font-size: .93rem; }
.lp-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .lp-rec { background: var(--sup); border: 1px solid var(--linha); border-radius: 16px; padding: 1.3rem; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; } .lp-rec:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); } .lp-rec p { color: var(--apoio); font-size: .9rem; margin: .35rem 0 0; }
.lp-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--acento-bg); color: var(--acento-tx); margin-bottom: .8rem; }
.lp-ciclo { text-align: center; margin-bottom: 1.2rem; } .lp-ciclo h3 { margin-bottom: .6rem; } .lp-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .lp-chips span { border: 1px solid var(--linha-forte); border-radius: 999px; padding: .35rem .85rem; font-size: .88rem; } .lp-chips em { font-style: normal; color: var(--apoio); margin-left: .4rem; font-size: .78rem; }
.lp-planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; } .lp-plano { position: relative; background: var(--sup); border: 1px solid var(--linha); border-radius: 18px; padding: 1.6rem; display: flex; flex-direction: column; box-shadow: var(--sombra); }
.lp-plano.p-semestral { border-top: 3px solid var(--sem); }
.lp-plano.destaque { background: linear-gradient(160deg, #26262d, var(--vip) 55%); color: #f4f4f5; border-color: var(--vip-borda); box-shadow: 0 20px 50px rgba(0,0,0,.25); } .lp-plano.destaque .lp-mes, .lp-plano.destaque li { color: #d4d4d8; } .lp-plano.destaque li svg { color: #fff; }
.lp-plano .selo { position: absolute; top: -12px; left: 1.4rem; background: #000; color: #fff; font-size: .7rem; font-weight: 700; padding: .22rem .75rem; border-radius: 999px; box-shadow: inset 0 0 0 1px #52525b; letter-spacing: .06em; text-transform: uppercase; }
.lp-preco { font-size: 2.3rem; font-weight: 600; margin-top: .5rem; letter-spacing: -0.04em; } .lp-mes { color: var(--apoio); font-size: .85rem; } .lp-plano ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: .5rem; flex: 1; font-size: .93rem; } .lp-plano li { display: flex; gap: .5rem; align-items: flex-start; } .lp-plano li svg { color: var(--ok); flex: none; margin-top: 3px; }
.lp-depos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-top: 2rem; } .lp-depos figure { margin: 0; border: 1px solid var(--linha); border-radius: 16px; padding: 1.3rem; background: var(--sup); } .lp-depos blockquote { margin: 0 0 .8rem; font-family: var(--serif); font-size: 1.12rem; } .lp-depos figcaption { font-size: .85rem; color: var(--apoio); }
.faq { margin-top: 2rem; } .faq details { border-bottom: 1px solid var(--linha); padding: 1rem 0; } .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--apoio); font-size: 1.3rem; line-height: 1; } .faq details[open] summary::after { content: '−'; } .faq p { color: var(--apoio); margin: .6rem 0 0; }
.lp-final { background: radial-gradient(70% 90% at 50% 0%, #23232d, var(--escuro) 70%); color: #fff; text-align: center; padding: 4.5rem 0; } .lp-final h2 { font-family: var(--sans); font-weight: 600; font-size: 2.2rem; letter-spacing: -0.04em; } .lp-final p { color: #a1a1aa; margin: .6rem 0 1.5rem; }
.lp-rodape { background: var(--escuro); color: #71717a; font-size: .82rem; padding: 1.75rem 0; text-align: center; border-top: 1px solid var(--escuro-linha); } .lp-rodape a { color: #a1a1aa; }
@media (max-width: 860px) {
  .lp-hero-in, .lp-passos, .lp-planos { grid-template-columns: 1fr; } .lp-nav { display: none; } .lp-topo-acoes { margin-left: auto; } .lp-hero { padding: 2.75rem 0 3.25rem; } .lp-cartao { transform: none; } .lp-sec { padding: 3.25rem 0; }
  .lp-numeros { grid-template-columns: 1fr 1fr; gap: 1rem; } .cd-prog { grid-template-columns: 1fr; } .card-rev, .convite-card { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, .esqueleto i, main > *, .conteudo > * { animation: none !important; transition: none !important; } }

/* ---------- chat geral ---------- */
.com-ponto { position: relative; }
.com-ponto.tem-novo::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--adm); box-shadow: 0 0 0 2px var(--sup-2); }
.menu a.com-ponto.tem-novo::after { left: 1.6rem; top: .45rem; }
.topo .com-ponto.tem-novo::after { right: 0; top: 0; }
.bolinha { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--adm); color: #fff; font-size: .72rem; font-weight: 600; vertical-align: middle; }
.chat-pag { display: flex; flex-direction: column; max-width: 860px; }
.chat-topo { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.chat-caixa { border: 1px solid var(--linha); border-radius: 14px; background: var(--sup-2); height: calc(100vh - 360px); min-height: 320px; overflow-y: auto; padding: .75rem .9rem; scroll-behavior: auto; }
.tag-chat { font-size: .62rem; letter-spacing: .06em; font-weight: 700; padding: .12rem .45rem; border-radius: 5px; }
.cm { padding: .35rem .5rem; border-radius: 10px; margin-top: .55rem; }
.cm.junto { margin-top: 0; padding-top: .05rem; }
.cm:hover { background: var(--nevoa); }
.cm.equipe .cm-txt { color: var(--tinta); }
.cm.minha { background: var(--acento-bg); }
.cm.piscar { animation: piscar-cm 1.6s ease; }
@keyframes piscar-cm { 0%, 60% { background: var(--marca-texto); } }
.cm-cab { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .85rem; margin-bottom: .1rem; }
.cm-nome { font-weight: 600; }
.cm-cab time { color: var(--suave); font-size: .75rem; }
.cm-corpo { display: flex; gap: .5rem; align-items: flex-start; }
.cm-txt { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; color: var(--tinta); }
.cm-txt a { color: var(--acento-tx); }
.cm-acoes { display: flex; gap: .15rem; opacity: 0; transition: opacity .15s; }
.cm:hover .cm-acoes, .cm:focus-within .cm-acoes { opacity: 1; }
@media (hover: none) { .cm-acoes { opacity: .55; } }
.cm-acoes button { background: none; border: 0; padding: .2rem; border-radius: 6px; color: var(--apoio); cursor: pointer; display: inline-flex; }
.cm-acoes button:hover { background: var(--linha); color: var(--tinta); }
.cm-resp { display: block; font-size: .8rem; color: var(--apoio); border-left: 2px solid var(--linha-forte); padding: .1rem .5rem; margin: .15rem 0 .25rem; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cm-resp b { color: var(--tinta); font-weight: 600; }
.cm-resp svg { vertical-align: -2px; margin-right: .25rem; }
.cm-dia { text-align: center; margin: 1rem 0 .25rem; font-size: .75rem; color: var(--suave); }
.cm-dia span { background: var(--sup-2); padding: 0 .6rem; }
.cm-mais { text-align: center; margin-bottom: .5rem; }
.chat-novas { align-self: center; margin-top: -2.75rem; margin-bottom: .75rem; position: relative; z-index: 2; display: inline-flex; gap: .3rem; align-items: center; border: 0; border-radius: 999px; padding: .35rem .85rem; background: var(--primario); color: var(--primario-tx); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: var(--sombra-alta); }
.chat-novas[hidden] { display: none; }
#chat-rodape { margin-top: .75rem; }
.chat-form { border: 1px solid var(--linha-forte); border-radius: 14px; background: var(--sup); padding: .55rem; }
.chat-linha { display: flex; gap: .5rem; align-items: flex-end; }
.chat-linha textarea { flex: 1; border: 0; resize: none; min-height: 40px; max-height: 160px; padding: .55rem .6rem; background: transparent; font: inherit; color: var(--tinta); box-shadow: none; outline: none; }
.chat-dica { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: var(--suave); padding: .25rem .6rem 0; gap: .4rem; }
.chat-dica > span:first-child { display: inline-flex; gap: .35rem; align-items: center; }
#chat-resp-prev { display: flex; gap: .45rem; align-items: center; font-size: .82rem; color: var(--apoio); background: var(--nevoa); border-radius: 8px; padding: .35rem .5rem; margin-bottom: .4rem; }
#chat-resp-prev[hidden] { display: none; }
#chat-resp-prev span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#chat-resp-prev button { background: none; border: 0; cursor: pointer; color: var(--apoio); display: inline-flex; }
.chat-aviso { display: flex; gap: .7rem; align-items: center; border: 1px solid var(--linha); border-radius: 14px; padding: .85rem 1rem; background: var(--sup); color: var(--apoio); font-size: .92rem; }
.chat-aviso > div { flex: 1; }
.chat-aviso b { color: var(--tinta); }
.chat-aviso.aviso { background: var(--aviso-bg); border-color: transparent; color: var(--aviso); }
.chat-aviso.aviso b { color: inherit; }
.chat-fixada { display: flex; gap: .65rem; align-items: flex-start; border: 1px solid var(--linha); border-left: 3px solid var(--adm); border-radius: 12px; padding: .65rem .85rem; margin-bottom: .75rem; background: var(--sup); }
.chat-fixada > svg { color: var(--adm); margin-top: .15rem; flex: none; }
.cf-corpo { flex: 1; min-width: 0; }
.cf-cab { display: flex; gap: .4rem; align-items: center; font-size: .82rem; }
.cf-txt { white-space: pre-wrap; font-size: .92rem; margin-top: .15rem; overflow-wrap: anywhere; }
.chat-legenda { margin-top: .9rem; display: flex; flex-direction: column; gap: .4rem; }
.chat-legenda-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.chat-legenda p { margin: 0; }
.cm-previa { background: var(--nevoa); border-radius: 10px; padding: .65rem .8rem; font-size: .85rem; margin-bottom: .75rem; }
.cm-previa p { margin: .35rem 0 0; white-space: pre-wrap; font-size: .92rem; overflow-wrap: anywhere; }
.ops-chat { display: flex; flex-direction: column; }
.op-chat { display: flex; gap: .7rem; align-items: center; width: 100%; background: none; border: 0; border-radius: 8px; padding: .65rem .6rem; font: inherit; color: var(--tinta); cursor: pointer; text-align: left; text-decoration: none; }
.op-chat:hover { background: var(--nevoa); }
.op-chat.perigo { color: var(--erro); }
.sep-op { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: .75rem .6rem .25rem; border-top: 1px solid var(--linha); margin-top: .35rem; }
@media (max-width: 860px) {
  .chat-caixa { height: calc(100vh - 400px); height: calc(100dvh - 400px); min-height: 240px; padding: .5rem; }
  .chat-topo { margin-bottom: .6rem; }
  .chat-topo .sub, .chat-legenda { display: none; }
  .chat-topo h1 { font-size: 1.5rem; }
  .chat-fixada { padding: .5rem .7rem; }
  .cf-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* tag do aluno em duas linhas: ALUNO em cima, o plano escrito embaixo bem pequeno */
.chat-online { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 500; color: var(--apoio); letter-spacing: 0; vertical-align: middle; margin-left: .4rem; }
.chat-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--sem); box-shadow: 0 0 0 3px var(--sem-bg); }
.chat-controle { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: -.25rem 0 .9rem; }
.seg-peq button { padding: .25rem .7rem; font-size: .82rem; min-height: 28px; }
.cm-reacoes { display: flex; flex-wrap: wrap; gap: .3rem; }
.cm-reacoes:not(:empty) { margin-top: .3rem; }
.cr { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--linha); background: var(--sup); border-radius: 999px; padding: .08rem .5rem; font: inherit; font-size: .85rem; cursor: pointer; color: var(--tinta); }
.cr b { font-size: .75rem; font-weight: 600; color: var(--apoio); }
.cr.minha { border-color: var(--acento); background: var(--acento-bg); }
.cr.minha b { color: var(--acento-tx); }
.cr:disabled { cursor: default; }
.cm { position: relative; }
.cm-picker { position: absolute; right: .5rem; top: -1.6rem; z-index: 5; display: flex; gap: .1rem; background: var(--sup); border: 1px solid var(--linha); border-radius: 999px; padding: .2rem .3rem; box-shadow: var(--sombra-alta); }
.cm-picker button { border: 0; background: none; font-size: 1.15rem; line-height: 1; padding: .25rem .3rem; border-radius: 50%; cursor: pointer; transition: transform .12s; }
.cm-picker button:hover { transform: scale(1.25); background: var(--nevoa); }
.perigo-txt { color: var(--erro); }

/* ---------- corporações e etapas ---------- */
.lp-corp { margin-bottom: 2rem; }
.lp-corp > h3 { text-align: center; font-size: 1.35rem; margin-bottom: 1rem; }
.lp-corp > h3 small { display: block; font-size: .85rem; font-weight: 400; color: var(--apoio); margin-top: .2rem; }
.lp-ciclo h4 { font-size: .95rem; margin-bottom: .55rem; color: var(--apoio); font-weight: 600; }
.trilha { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--apoio); margin-bottom: .6rem; }
.trilha a { color: var(--apoio); text-decoration: none; }
.trilha a:hover { color: var(--tinta); text-decoration: underline; }
.trilha b { color: var(--tinta); font-weight: 600; }
.grade-esc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem; }
.cartao-esc { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; min-height: 130px; padding: 1.1rem 1.15rem; border: 1px solid var(--linha); border-radius: 14px; background: var(--sup); color: var(--tinta); text-decoration: none; box-shadow: var(--sombra); transition: border-color .15s, transform .15s; }
.cartao-esc:hover { border-color: var(--linha-forte); transform: translateY(-2px); }
.cartao-esc b { display: block; font-size: 1.25rem; letter-spacing: -.02em; }
.cartao-esc span { display: block; font-size: .85rem; color: var(--apoio); margin-top: .2rem; }
.cartao-esc em { font-style: normal; font-size: .8rem; color: var(--apoio); }
.cartao-esc.minha { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.cartao-esc i.tag { position: absolute; top: .8rem; right: .8rem; font-style: normal; }
.filtro-etapa { display: flex; flex-direction: column; gap: .6rem; }
.seg-rolar { align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-rolar::-webkit-scrollbar { display: none; }
.chips-filtro button { font: inherit; cursor: pointer; padding: .38rem .8rem; border: 1px solid var(--linha-forte); border-radius: 999px; color: var(--tinta); font-size: .86rem; background: var(--sup); }
.chips-filtro button[aria-current="true"] { background: var(--primario); color: var(--primario-tx); border-color: var(--primario); }
.estr-topo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.corp-cab { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; padding: 1rem 1.15rem; border: 1px solid var(--linha); border-radius: 14px; background: var(--sup-2); margin-bottom: .5rem; }
.corp-cab h2 { font-size: 1.5rem; }
.be-tit { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.be-tit .mover { display: inline-flex; flex-direction: column; }
.be-tit .mover button { border: 0; background: none; font-size: .6rem; line-height: 1; padding: .1rem .25rem; color: var(--apoio); cursor: pointer; }
.be-tit .mover button:disabled { opacity: .3; cursor: default; }
.bloco-etapa { margin-top: 1.75rem; }
/* questão: riscar alternativa, banca/ano e como a turma respondeu */
.alt-linha { display: flex; gap: .4rem; align-items: stretch; }
.alt-linha .alt { flex: 1; position: relative; overflow: hidden; }
.alt-linha.riscada .alt { opacity: .45; }
.alt-linha.riscada .alt .tx { text-decoration: line-through; }
.riscar { flex: none; width: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linha); background: var(--sup); color: var(--apoio); border-radius: 10px; cursor: pointer; }
.riscar:hover { color: var(--tinta); border-color: var(--linha-forte); }
.alt[style*="--p"]::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: currentColor; opacity: .06; pointer-events: none; }
.pct-alt { margin-left: auto; padding-left: .75rem; font-size: .82rem; font-weight: 600; color: var(--apoio); align-self: center; white-space: nowrap; }
.q-fonte { margin-right: .5rem; background: var(--escuro); color: var(--escuro-tx); letter-spacing: .02em; }
.q-turma { display: flex; gap: .4rem; align-items: center; margin: .85rem 0 0; font-size: .9rem; color: var(--apoio); }
.q-turma b { color: var(--tinta); }
.lp-questao { max-width: 720px; margin: 0 auto; text-align: left; background: var(--sup); border: 1px solid var(--linha); border-radius: 16px; padding: 1.4rem; box-shadow: var(--sombra-alta); color: var(--tinta); }
.lp-q-fonte { font-size: .8rem; color: var(--apoio); margin-bottom: .6rem; }
.lp-q-enun { white-space: pre-wrap; font-size: 1.02rem; margin: 0 0 1rem; }
.guia { border: 1px solid var(--linha); border-radius: 14px; background: var(--sup-2); padding: .8rem 1rem; margin-bottom: 1.25rem; }
.guia summary { cursor: pointer; font-weight: 600; display: flex; gap: .45rem; align-items: center; }
.guia ol { margin: .75rem 0 .5rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .45rem; font-size: .93rem; }

/* ---------- perfil público e medalhas ---------- */
.link-perfil { color: inherit; text-decoration: none; }
.link-perfil:hover { text-decoration: underline; }
.pf { max-width: 980px; }
.pf-hero { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; padding: 1.75rem; border-radius: 20px; color: #f4f4f5; background: radial-gradient(120% 140% at 0% 0%, #2a2a33 0%, #0b0b0e 60%); overflow: hidden; }
.pf-hero::after { content: ''; position: absolute; inset: auto -20% -60% 40%; height: 220px; background: radial-gradient(closest-side, rgba(91,124,245,.35), transparent); pointer-events: none; }
.pf-hero.t-admin::after { background: radial-gradient(closest-side, rgba(229,72,77,.35), transparent); }
.pf-hero.t-semestral::after { background: radial-gradient(closest-side, rgba(47,158,91,.35), transparent); }
.pf-hero.t-anual::after { background: radial-gradient(closest-side, rgba(212,212,216,.28), transparent); }
.pf-avatar { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(135deg, #3e63dd, #1b1b22); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.t-admin .pf-avatar { background: linear-gradient(135deg, #e5484d, #1b1b22); }
.t-semestral .pf-avatar { background: linear-gradient(135deg, #2f9e5b, #1b1b22); }
.t-anual .pf-avatar { background: linear-gradient(135deg, #52525b, #000); box-shadow: 0 0 0 3px #d4d4d8; }
.t-gratuito .pf-avatar { background: linear-gradient(135deg, #52525b, #1b1b22); }
.pf-id h1 { font-size: 1.9rem; color: #fff; }
.pf-sub { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .35rem; font-size: .88rem; color: #a1a1aa; }
.pf-arroba { color: #d4d4d8; font-weight: 500; }
.pf-bio { margin: .6rem 0 0; color: #e4e4e7; max-width: 560px; }
.pf-bio.apoio { color: #a1a1aa; font-style: italic; }
.pf-meta { margin-top: .6rem; font-size: .82rem; color: #a1a1aa; }
.pf-meta b { color: #fff; }
.pf-acoes { display: flex; flex-direction: column; gap: .5rem; position: relative; z-index: 1; }
.pf-acoes .feito { opacity: .7; }
.pf-nums { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin: 1rem 0 .5rem; }
.pf-num { border: 1px solid var(--linha); border-radius: 14px; padding: .9rem; background: var(--sup); display: flex; flex-direction: column; gap: .15rem; }
.pf-num span { color: var(--apoio); }
.pf-num b { font-size: 1.45rem; letter-spacing: -.02em; }
.pf-num small { color: var(--apoio); font-size: .76rem; line-height: 1.3; }
.medalhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .75rem; }
.medalha { text-align: center; border: 1px solid var(--linha); border-radius: 14px; padding: .9rem .5rem .75rem; background: var(--sup); }
.md-disco { position: relative; width: 72px; height: 72px; margin: 0 auto .5rem; display: grid; place-items: center; color: #fff; }
.md-emb { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.md-ico { position: relative; display: grid; place-items: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.md-disco em { position: absolute; right: -6px; top: -4px; font-style: normal; font-size: .68rem; font-weight: 700; background: var(--primario); color: var(--primario-tx); border-radius: 999px; padding: .05rem .35rem; }
:root { --r-comum: #a1a1aa; --r-rara: #3b82f6; --r-epica: #8b5cf6; --r-lendaria: #f97316; --r-mitica: #09090b; }
.n-comum { --r: var(--r-comum); } .n-rara { --r: var(--r-rara); } .n-epica { --r: var(--r-epica); } .n-lendaria { --r: var(--r-lendaria); } .n-mitica { --r: var(--r-mitica); }
.medalha.ganha { border-color: color-mix(in srgb, var(--r) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r) 35%, transparent); }
.medalha.ganha.n-mitica { background: linear-gradient(180deg, #18181b, #09090b); border-color: #27272a; color: #fafafa; }
.medalha.ganha.n-mitica .md-pct, .medalha.ganha.n-mitica .md-desc { color: #a1a1aa; }
/* brilho conforme a raridade (só nas conquistadas): quanto mais rara, mais chama atenção */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes girar-borda { to { --ang: 360deg; } }
@keyframes halo { 0%, 100% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--r) 45%, transparent)); } 50% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--r) 85%, transparent)); } }
.medalha.ganha.n-rara .md-emb { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--r) 45%, transparent)); }
.medalha.ganha.n-epica .md-emb, .medalha.ganha.n-lendaria .md-emb { animation: halo 2.6s ease-in-out infinite; }
.medalha.ganha.n-lendaria .md-emb { animation-duration: 2s; }
.medalha.ganha.n-lendaria:not(.grande), .medalha.ganha.n-mitica:not(.grande) { border: 1.5px solid transparent; animation: girar-borda 4s linear infinite; }
.medalha.ganha.n-lendaria:not(.grande) { background: linear-gradient(var(--sup), var(--sup)) padding-box, conic-gradient(from var(--ang), #f97316, #fde68a, #ea580c 30%, #f97316 50%, #fde68a 70%, #ea580c 85%, #f97316) border-box; box-shadow: 0 6px 22px -6px rgba(249,115,22,.45); }
.medalha.ganha.n-mitica:not(.grande) { border-width: 2px; background: linear-gradient(180deg, #1c1c20, #000) padding-box, conic-gradient(from var(--ang), #3f3f46, #fff 6%, #c4b5fd 10%, #93c5fd 14%, #3f3f46 22%, #3f3f46 50%, #fff 56%, #fdba74 60%, #3f3f46 70%, #3f3f46) border-box; box-shadow: var(--mitica-sombra); animation-duration: 3s; }
/* a mítica precisa se destacar tanto no claro (sombra escura) quanto no escuro (brilho claro) */
:root { --mitica-sombra: 0 10px 28px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --mitica-sombra: 0 0 22px -2px rgba(255,255,255,.22), 0 0 48px -10px rgba(196,181,253,.35); } }
:root[data-tema="escuro"] { --mitica-sombra: 0 0 22px -2px rgba(255,255,255,.22), 0 0 48px -10px rgba(196,181,253,.35); }
.medalha.ganha.n-mitica .md-emb { animation: halo-mitica 2.4s ease-in-out infinite; }
@keyframes halo-mitica { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,.25)) drop-shadow(0 0 1px rgba(0,0,0,.6)); } 50% { filter: drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 0 1px rgba(0,0,0,.6)); } }
@keyframes reflexo { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.celebra .medalha.grande.n-epica .md-emb, .celebra .medalha.grande.n-lendaria .md-emb { animation: halo 2s ease-in-out .7s infinite; }
.celebra .medalha.grande.n-mitica .md-emb { animation: halo-mitica 2s ease-in-out .7s infinite; }
@media (prefers-reduced-motion: reduce) { .medalha.ganha, .medalha.ganha .md-disco, .medalha.ganha .md-emb { animation: none !important; } }
.medalha.bloq .md-emb { filter: grayscale(1); opacity: .28; }
.medalha.bloq .md-ico { color: var(--apoio); filter: none; }
.md-cadeado { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--sup); color: var(--apoio); box-shadow: 0 0 0 1px var(--linha); }
.medalha .md-nivel { color: var(--r, var(--suave)); font-weight: 600; }
.medalha.bloq .md-nivel { opacity: .8; }
.md-pct { font-size: .7rem; color: var(--suave); margin-top: .35rem; }
.medalha.n-mitica .md-nivel { color: var(--tinta); }
.medalha.ganha.n-mitica:not(.grande) .md-nivel { color: #e4e4e7; }
.col-legenda .n-mitica i { background: #000; box-shadow: 0 0 0 1px #a1a1aa; }
.pf-ver-col { margin-top: 1rem; width: 100%; justify-content: center; }
.pf-ver-col small { color: var(--suave); font-weight: 500; margin-left: .25rem; }
.col-topo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.col-legenda { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .75rem; color: var(--apoio); }
.col-legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.col-legenda i { width: 9px; height: 9px; border-radius: 50%; background: var(--r); box-shadow: 0 0 0 1px var(--linha); }
.col-corpo { max-height: min(62vh, 640px); overflow-y: auto; margin: 0 -.25rem; padding: 0 .25rem; }
.col-grupo + .col-grupo { margin-top: 1.25rem; }
.col-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.col-cab h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--apoio); margin: 0; }
.col-cab span { font-size: .75rem; color: var(--suave); }
.medalhas.col { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.medalhas.col .md-desc { font-size: .72rem; line-height: 1.35; margin-top: .35rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.medalha.bloq .md-nome { color: var(--apoio); }
.md-nome { font-weight: 600; font-size: .86rem; line-height: 1.25; }
.md-nivel { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-top: .15rem; }
.md-data { font-size: .72rem; color: var(--apoio); margin-top: .35rem; }
.md-prog { height: 4px; border-radius: 4px; background: var(--nevoa); margin: .5rem .5rem 0; overflow: hidden; }
.md-prog i { display: block; height: 100%; background: var(--acento); }
.medalha.grande, .medalha.grande.ganha { border: 0; background: none; box-shadow: none; color: inherit; }
.medalha.grande .md-disco { width: 128px; height: 128px; }
.medalha.grande .md-nome { font-size: 1.35rem; }
.md-desc { color: var(--apoio); margin: .5rem 0 0; }
.mapa-estudo { display: flex; gap: 3px; overflow-x: auto; padding-bottom: .25rem; }
.mapa-estudo > div { display: flex; flex-direction: column; gap: 3px; }
.mapa-estudo i, .mapa-leg i { display: block; width: 13px; height: 13px; border-radius: 3px; background: var(--nevoa); }
.mapa-estudo i.fut { background: none; }
.mapa-estudo .l1, .mapa-leg .l1 { background: #c6dbff; } .mapa-estudo .l2, .mapa-leg .l2 { background: #85a8f7; } .mapa-estudo .l3, .mapa-leg .l3 { background: #4f74ea; } .mapa-estudo .l4, .mapa-leg .l4 { background: #2747b8; }
.mapa-leg { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--apoio); margin-top: .5rem; }
.mapa-leg span:last-child { display: inline-flex; align-items: center; gap: 3px; }
.pf-mats > div { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr auto; gap: .75rem; align-items: center; padding: .4rem 0; }
.pf-mats b { font-size: .9rem; }
.pf-recado-form { display: flex; gap: .5rem; margin-bottom: 1rem; }
.pf-recado-form input { flex: 1; }
.pf-recados { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
.pf-recado { border: 1px solid var(--linha); border-radius: 14px; padding: .85rem .9rem .9rem; background: var(--sup); position: relative; transition: border-color .2s, transform .2s var(--mola, ease), box-shadow .2s; }
.pf-recado:hover { border-color: var(--linha-forte); transform: translateY(-2px); box-shadow: 0 8px 22px -14px rgba(0,0,0,.35); }
.pr-cab { display: flex; align-items: center; gap: .65rem; padding-right: 1.5rem; }
.pr-cab > a, .pr-cab > .pr-av { flex-shrink: 0; display: inline-flex; }
.pr-av.am-av { width: 40px; height: 40px; font-size: .78rem; }
.pr-quem { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pr-linha { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; }
.pr-linha a { color: var(--tinta); text-decoration: none; } .pr-linha a:hover { text-decoration: underline; }
.pr-quem small { color: var(--suave); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-recado p { margin: .7rem 0 0; padding: .6rem .75rem; border-radius: 4px 12px 12px 12px; background: var(--nevoa); font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.pr-x { position: absolute; top: .55rem; right: .55rem; border: 0; background: none; color: var(--suave); cursor: pointer; padding: .2rem; border-radius: 6px; display: inline-flex; }
.pr-x:hover { color: var(--erro); background: var(--erro-bg); }
.pf-url { display: flex; align-items: center; border: 1px solid var(--linha-forte); border-radius: 10px; padding-left: .7rem; background: var(--sup); }
.pf-url span { color: var(--apoio); }
.pf-url input { border: 0; box-shadow: none; padding-left: .2rem; }
.pf-visitante .view { max-width: 1020px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.pf-visitante .lp-topo-in { justify-content: space-between; max-width: 1020px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } .pf-visitante .lp-topo-acoes { display: flex; gap: .5rem; }

.celebra { position: relative; text-align: center; padding: 1.5rem .5rem .5rem; overflow: hidden; }
.celebra-rot { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--acento-tx); margin: 0 0 .75rem; }
.celebra-brilho { position: absolute; inset: -40% -40% auto; height: 300px; background: radial-gradient(closest-side, color-mix(in srgb, var(--r, #ffc850) 45%, transparent), transparent); animation: brilho-celebra 2.4s ease-in-out infinite alternate; pointer-events: none; }
@keyframes brilho-celebra { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.1); opacity: 1; } }
.celebra .medalha.grande .md-disco { animation: surgir .7s cubic-bezier(.2,1.4,.4,1) both; }
.celebra.n-mitica .celebra-brilho { background: radial-gradient(closest-side, rgba(196,181,253,.35), rgba(255,255,255,.08) 60%, transparent); }
.celebra .medalha.grande .md-nivel { font-size: .8rem; letter-spacing: .14em; }
.celebra-pct { color: var(--apoio); font-size: .88rem; margin: .4rem 0 0; min-height: 1.2em; }
.celebra-acoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.25rem; position: relative; z-index: 1; }
.celebra-pontos { display: flex; gap: .35rem; justify-content: center; margin-top: 1rem; }
.celebra-pontos i { width: 6px; height: 6px; border-radius: 99px; background: var(--linha-forte); transition: width .25s var(--mola), background-color .25s; }
.celebra-pontos i.on { width: 18px; background: var(--tinta); }
/* confete: estoura do centro da medalha; quanto mais rara, mais pedaços */
.confete { position: absolute; left: 50%; top: 7.2rem; width: 0; height: 0; pointer-events: none; z-index: 0; }
.confete i { position: absolute; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: confete 1.3s cubic-bezier(.15,.7,.3,1) both; }
.confete i:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
@keyframes confete { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--g)) scale(1); } }
.celebra .medalha.grande { position: relative; z-index: 1; }
/* medalha recém-conquistada, ao chegar no perfil */
.medalha.md-recem { animation: md-recem 1.6s var(--suave-mov) 2; }
@keyframes md-recem { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--r) 0%, transparent); transform: none; } 30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--r) 45%, transparent); transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .confete { display: none; } .medalha.md-recem { animation: none; outline: 2px solid var(--r); } }
@keyframes surgir { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 860px) {
  .pf-hero { grid-template-columns: auto 1fr; padding: 1.25rem; }
  .pf-acoes { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .pf-avatar { width: 64px; height: 64px; font-size: 1.5rem; }
  .pf-id h1 { font-size: 1.45rem; }
  .pf-nums { grid-template-columns: repeat(2, 1fr); }
  .pf-mats > div { grid-template-columns: 1fr auto; } .pf-mats .barra { grid-column: 1 / -1; grid-row: 2; }
}
.pf-criador { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .28rem .7rem; border-radius: 999px; margin-bottom: .5rem; color: #111; background: linear-gradient(90deg, #ffe08a, #ffb224, #ffe08a); background-size: 200% 100%; animation: ouro 3s linear infinite; }
@keyframes ouro { to { background-position: -200% 0; } }
.pf-id-num { font-variant-numeric: tabular-nums; color: #71717a; }
.pf-sobre { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .55rem; font-size: .88rem; color: #d4d4d8; }
.pf-sobre span { display: inline-flex; align-items: center; gap: .35rem; }
.pf-sobre b { color: #fff; }
.pf-destaques { display: flex; gap: .5rem; position: relative; z-index: 1; }
.medalha.mini { border: 0; background: rgba(255,255,255,.06); border-radius: 12px; padding: .55rem .5rem .45rem; width: 84px; }
.medalha.mini .md-disco { width: 44px; height: 44px; margin-bottom: .35rem; }
.medalha.mini > span { display: block; font-size: .68rem; line-height: 1.2; color: #e4e4e7; }
.pf-nums { grid-template-columns: repeat(4, 1fr); }
.pf-esc-med { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .25rem .75rem; }
@media (max-width: 860px) { .pf-destaques { grid-column: 1 / -1; } .medalha.mini { width: auto; flex: 1; } }
/* comunidade */
.com-grade { display: grid; grid-template-columns: 1fr 320px; gap: 1.75rem; align-items: start; }
.com-tit { font-size: 1rem; margin-bottom: .75rem; }
.feed { display: flex; flex-direction: column; gap: .6rem; }
.feed-item { display: flex; gap: .85rem; align-items: center; border: 1px solid var(--linha); border-radius: 14px; padding: .8rem .9rem; background: var(--sup); }
.feed-item p { margin: 0; }
.feed-item small { color: var(--apoio); font-size: .78rem; }
.feed-item .medalha.mini { width: auto; padding: 0; background: none; }
.feed-item .medalha.mini .md-disco { margin: 0; }
.feed-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--aviso-bg); color: var(--aviso); }
.com-busca { display: flex; gap: .5rem; margin-bottom: 1rem; }
.com-busca .pf-url { flex: 1; min-width: 0; } .com-busca .pf-url input { min-width: 0; width: 100%; } .com-busca .btn { flex-shrink: 0; }
.pessoas { display: flex; flex-direction: column; gap: .35rem; }
.pessoa { display: flex; gap: .65rem; align-items: center; padding: .45rem .5rem; border-radius: 10px; color: var(--tinta); text-decoration: none; }
.pessoa:hover { background: var(--nevoa); }
.pessoa b { display: block; font-size: .92rem; }
.pessoa small { color: var(--apoio); font-size: .78rem; }
.pf-avatar.mini { width: 38px; height: 38px; font-size: .85rem; color: #fff; flex: none; box-shadow: none; }
@media (max-width: 860px) { .com-grade { grid-template-columns: 1fr; } }
.pf-lado { display: flex; flex-direction: column; gap: .75rem; align-items: flex-end; position: relative; z-index: 1; }
@media (max-width: 860px) {
  .pf-nums { grid-template-columns: repeat(2, 1fr); }
  .pf-lado { grid-column: 1 / -1; align-items: stretch; }
}
/* perfil: faixas de cargo, visitante bloqueado e imagem para story */
.pf-faixas { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .55rem; }
.pf-faixas .pf-criador { margin: 0; }
.pf-cargo { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .28rem .75rem; border-radius: 999px; color: #fff; }
.pf-cargo.adm { background: var(--adm); } .pf-cargo.prof { background: var(--prof); } .pf-cargo.sem { background: var(--sem); }
.pf-cargo.vip { background: #000; box-shadow: inset 0 0 0 1px #52525b; } .pf-cargo.cinza { background: rgba(255,255,255,.14); }
.pf-obj-nome { color: #a1a1aa; }
.pf-story-previa { display: block; width: 100%; max-width: 280px; margin: 0 auto 1rem; border-radius: 16px; box-shadow: var(--sombra-alta); }

/* chat: canais e animações (mensagem chegando, reações, botões) */
.chat-canais { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: -.25rem 0 .85rem; }
.chat-canais button { position: relative; display: inline-flex; gap: .35rem; align-items: center; border: 1px solid var(--linha-forte); background: var(--sup); color: var(--apoio); border-radius: 999px; padding: .4rem .85rem; font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.chat-canais button:hover { color: var(--tinta); transform: translateY(-1px); }
.chat-canais button[aria-current="true"] { background: var(--primario); color: var(--primario-tx); border-color: var(--primario); }
.chat-canais .apoio { margin-left: .35rem; }
.chat-ponto { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--adm); box-shadow: 0 0 0 2px var(--fundo); }
.cm { transition: background .2s; }
.cm.entra { animation: cm-entra .35s cubic-bezier(.2,.9,.3,1.2) both; }
.cm.minha.entra { animation-name: cm-entra-minha; }
@keyframes cm-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cm-entra-minha { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.cr { animation: cr-pop .25s cubic-bezier(.2,1.6,.4,1) both; transition: transform .12s; }
.cr:active { transform: scale(.9); }
@keyframes cr-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.cm-picker { animation: picker-abre .18s ease-out both; transform-origin: right bottom; }
@keyframes picker-abre { from { opacity: 0; transform: translateY(6px) scale(.85); } to { opacity: 1; transform: none; } }
.chat-novas:not([hidden]) { animation: novas-pula 1.4s ease-in-out infinite; }
@keyframes novas-pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.chat-online i { animation: online-pulsa 2s ease-in-out infinite; }
@keyframes online-pulsa { 0%, 100% { box-shadow: 0 0 0 3px var(--sem-bg); } 50% { box-shadow: 0 0 0 6px transparent; } }
.chat-fixada { animation: cm-entra .4s ease-out both; }
.chat-form { transition: box-shadow .2s, border-color .2s; }
.chat-form:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }
.chat-form .btn[type=submit] { transition: transform .12s; }
.chat-form .btn[type=submit]:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .cm.entra, .cr, .cm-picker, .chat-novas, .chat-online i, .chat-fixada { animation: none !important; } }
.pf-denunciar { border: 0; background: none; color: #a1a1aa; font: inherit; font-size: .82rem; cursor: pointer; display: inline-flex; gap: .3rem; align-items: center; align-self: center; }
.pf-denunciar:hover { color: #ff9592; }

/* menu de tema e animação da troca */
.menu-tema { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: .15rem; min-width: 190px; padding: .35rem; border-radius: 14px; background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra-alta); animation: picker-abre .18s ease-out both; }
.menu-tema button { display: flex; align-items: center; gap: .65rem; border: 0; background: none; color: var(--tinta); font: inherit; font-size: .92rem; padding: .55rem .7rem; border-radius: 10px; cursor: pointer; text-align: left; }
.menu-tema button span { flex: 1; }
.menu-tema button:hover { background: var(--nevoa); }
.menu-tema button[aria-checked="true"] { background: var(--acento-bg); color: var(--acento-tx); font-weight: 600; }
.menu-tema button svg:first-child { transition: transform .3s; }
.menu-tema button:hover svg:first-child { transform: rotate(-20deg) scale(1.1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.tema-trocando, .tema-trocando * { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }
[data-tema-botao] svg { transition: transform .45s cubic-bezier(.2,1.4,.4,1); }
[data-tema-botao]:hover svg { transform: rotate(25deg); }


/* ==========================================================================
   Movimento: entradas suaves, botões que respondem ao toque e números que contam.
   Tudo curto (até ~0,4 s) e desligado para quem pede menos movimento no aparelho.
   ========================================================================== */
:root { --mola: cubic-bezier(.2,.9,.3,1.15); --suave-mov: cubic-bezier(.2,.8,.2,1); }
/* página: cada bloco entra um pouco depois do anterior */
#view > *:nth-child(2) { animation-delay: .04s; } #view > *:nth-child(3) { animation-delay: .08s; } #view > *:nth-child(4) { animation-delay: .12s; }
#view > *:nth-child(5) { animation-delay: .16s; } #view > *:nth-child(n+6) { animation-delay: .2s; }
/* listas e grades: os itens aparecem em cascata */
.lista > .item, .grade-esc > *, .pf-nums > *, .medalhas > .medalha, .feed > *, .cards-num > *, .pessoas > *, .pf-recados > *, .lp-grade > *, .grade-materias > * { animation: surge .38s var(--suave-mov) both; }
@keyframes surge { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
:is(.lista, .grade-esc, .pf-nums, .medalhas, .feed, .cards-num, .pessoas, .pf-recados, .lp-grade, .grade-materias) > :nth-child(2) { animation-delay: .03s; }
:is(.lista, .grade-esc, .pf-nums, .medalhas, .feed, .cards-num, .pessoas, .pf-recados, .lp-grade, .grade-materias) > :nth-child(3) { animation-delay: .06s; }
:is(.lista, .grade-esc, .pf-nums, .medalhas, .feed, .cards-num, .pessoas, .pf-recados, .lp-grade, .grade-materias) > :nth-child(4) { animation-delay: .09s; }
:is(.lista, .grade-esc, .pf-nums, .medalhas, .feed, .cards-num, .pessoas, .pf-recados, .lp-grade, .grade-materias) > :nth-child(5) { animation-delay: .12s; }
:is(.lista, .grade-esc, .pf-nums, .medalhas, .feed, .cards-num, .pessoas, .pf-recados, .lp-grade, .grade-materias) > :nth-child(6) { animation-delay: .15s; }
:is(.lista, .grade-esc, .pf-nums, .medalhas, .feed, .cards-num, .pessoas, .pf-recados, .lp-grade, .grade-materias) > :nth-child(7) { animation-delay: .18s; }
:is(.lista, .grade-esc, .pf-nums, .medalhas, .feed, .cards-num, .pessoas, .pf-recados, .lp-grade, .grade-materias) > :nth-child(n+8) { animation-delay: .21s; }
/* botões: sobem um pouco ao passar o mouse e "afundam" ao clicar */
.btn { transition: background-color .18s, border-color .18s, color .18s, box-shadow .2s, transform .16s var(--mola); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,16,20,.12); } }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .06s; }
/* itens clicáveis: leve destaque */
a.item, .item.corpo-link, .cartao-esc, .pessoa, .op-chat, .menu a, .abas a, .chips-filtro a, .chips-filtro button, .seg a, .seg button { transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--mola), box-shadow .2s; }
@media (hover: hover) { a.item:hover { transform: translateX(3px); } .chips-filtro a:hover, .chips-filtro button:hover { transform: translateY(-1px); } }
.menu a svg { transition: transform .25s var(--mola); }
@media (hover: hover) { .menu a:hover svg { transform: scale(1.12) rotate(-4deg); } }
.menu a[aria-current="page"] svg, .abas a[aria-current="page"] svg { animation: icone-ativo .4s var(--mola); }
@keyframes icone-ativo { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.seg [aria-current="true"] { transition: background-color .2s, box-shadow .2s, color .2s; }
/* janelas: abrem crescendo e o fundo escurece aos poucos */
dialog[open] { animation: janela-abre .26s var(--mola); }
dialog[open]::backdrop { animation: fundo-abre .25s ease both; }
@keyframes janela-abre { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fundo-abre { from { opacity: 0; } to { opacity: 1; } }
/* avisos: sobem com um pequeno impulso */
#toast div { animation: aviso-sobe .32s var(--mola) both; }
@keyframes aviso-sobe { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
/* barras de progresso: enchem ao aparecer */
.barra i, .md-prog i, .meta-q i, .medidor .barras i.on, .hbar i { animation: enche .7s var(--suave-mov) both; transform-origin: left; }
@keyframes enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.q-prog i { transition: width .45s var(--suave-mov); }
/* questões: escolher, acertar e errar */
.alt { transition: border-color .15s, background-color .15s, transform .18s var(--mola), box-shadow .2s; }
@media (hover: hover) { .alt:not(:disabled):hover { transform: translateX(2px); border-color: var(--acento); } }
.alt.sel { animation: escolhe .28s var(--mola); }
@keyframes escolhe { 0% { transform: scale(.98); } 60% { transform: scale(1.01); } 100% { transform: none; } }
.alt.certa { animation: acerta .55s var(--mola); }
@keyframes acerta { 0% { box-shadow: 0 0 0 0 rgba(48,164,108,.45); } 70% { box-shadow: 0 0 0 10px rgba(48,164,108,0); } 100% { box-shadow: none; } }
.alt.errada { animation: erra .4s ease; }
@keyframes erra { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.resultado { animation: surge .35s var(--suave-mov) both; }
/* medalhas conquistadas: um brilho passa ao passar o mouse */
.medalha.ganha .md-disco { transition: transform .3s var(--mola); }
@media (hover: hover) { .medalha.ganha:hover .md-disco { transform: scale(1.08) rotate(-4deg); } }
/* cartões do perfil e da vitrine: sobem levemente */
@media (hover: hover) { .pf-num, .lp-rec, .lp-plano, .card-dia { transition: transform .22s var(--mola), box-shadow .22s; } .pf-num:hover, .lp-rec:hover, .lp-plano:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); } }
/* navegar: avançar entra pela direita, voltar entra pela esquerda */
html[data-dir="frente"] :is(main, .conteudo) > * { animation-name: entra-frente; }
html[data-dir="volta"] :is(main, .conteudo) > * { animation-name: entra-volta; }
@keyframes entra-frente { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes entra-volta { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
/* barra de carregamento no topo */
#carga { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300; pointer-events: none; opacity: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--acento) 40%, #fff)); box-shadow: 0 0 8px color-mix(in srgb, var(--acento) 60%, transparent); }
#carga.on { opacity: 1; animation: carga 8s cubic-bezier(.1,.7,.2,1) forwards; }
#carga.on.fim { animation: none; transform: scaleX(1); opacity: 0; transition: transform .2s ease, opacity .35s ease .15s; }
@keyframes carga { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 100% { transform: scaleX(.92); } }
/* janelas e avisos também saem com suavidade */
dialog.fechando { animation: janela-fecha .16s ease-in forwards; }
dialog.fechando::backdrop { animation: fundo-fecha .16s ease-in forwards; }
@keyframes janela-fecha { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes fundo-fecha { to { opacity: 0; } }
#toast div.sai { animation: aviso-sai .22s ease-in forwards; }
@keyframes aviso-sai { to { opacity: 0; transform: translateY(8px) scale(.96); } }
/* toque: cartões e itens "afundam" levemente ao clicar */
:is(a.item, .item.corpo-link, .cartao-esc, .pessoa, .pf-num, .lp-plano, .grade-materias > a, .feed-item, .medalha):active { transform: scale(.985); transition-duration: .06s; }
.menu a:active, .abas a:active, .seg button:active, .seg a:active, .chips-filtro :is(a, button):active { transform: scale(.96); transition-duration: .06s; }
/* foco visível e suave para quem usa o teclado */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; transition: outline-offset .15s; }
@media (prefers-reduced-motion: reduce) {
  #view > *, .lista > .item, .grade-esc > *, .pf-nums > *, .medalhas > .medalha, .feed > *, .cards-num > *, .pessoas > *, .pf-recados > *, .lp-grade > *, .grade-materias > *,
  dialog[open], dialog[open]::backdrop, #toast div, #carga, dialog.fechando, html[data-dir] :is(main, .conteudo) > *, .barra i, .md-prog i, .meta-q i, .medidor .barras i.on, .hbar i, .alt, .resultado, .menu a svg, .abas a svg { animation: none !important; transition: none !important; }
}

/* faixas de aluno (sem estrela): semestral verde e anual preto, com acabamento metálico suave */
.tag.sem, .pf-cargo.sem { background: linear-gradient(135deg, #36b06a 0%, #23874c 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(24,121,78,.25); }
.tag.vip, .pf-cargo.vip { background: linear-gradient(135deg, #3a3a42 0%, #0a0a0c 55%, #26262c 100%); color: #f4f4f5; box-shadow: inset 0 0 0 1px rgba(212,212,216,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.tag.vip, .pf-cargo.vip, .tag.sem, .pf-cargo.sem { position: relative; overflow: hidden; }
.tag.vip::after, .pf-cargo.vip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-130%); animation: faixa-brilho 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes faixa-brilho { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .tag.vip::after, .pf-cargo.vip::after { animation: none; } }
/* faixas de Administrador e Professor no mesmo acabamento das de aluno: cor sólida com um leve degradê */
.tag.adm, .pf-cargo.adm { background: linear-gradient(135deg, #ef5a5f 0%, #cf3338 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(206,44,49,.25); }
.tag.prof, .pf-cargo.prof { background: linear-gradient(135deg, #5677e8 0%, #3451b2 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(52,81,178,.25); }
.chip-plano.adm { background: linear-gradient(135deg, #ef5a5f, #cf3338); border-color: transparent; }
.chip-plano.prof { background: linear-gradient(135deg, #5677e8, #3451b2); border-color: transparent; }
.chip-plano.semestral { background: linear-gradient(135deg, #36b06a, #23874c); border-color: transparent; }
.chip-plano.anual { background: linear-gradient(135deg, #3a3a42, #0a0a0c 55%, #26262c); border-color: rgba(212,212,216,.35); }
.chip-plano { transition: transform .2s var(--mola), box-shadow .2s; }
@media (hover: hover) { .chip-plano:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,16,20,.15); } }


/* ==========================================================================
   Amigos: barra no canto inferior direito; abre uma janela pequena com a lista e a conversa
   ========================================================================== */
#amigos { position: fixed; right: 1.25rem; bottom: 0; z-index: 90; width: 370px; max-width: calc(100vw - 1.5rem); }
.am-janela { background: var(--sup); border: 1px solid var(--linha); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 28px rgba(16,16,20,.14); overflow: hidden; display: flex; flex-direction: column; }
#amigos.aberto .am-janela { height: min(460px, 70vh); animation: am-abre .24s var(--mola, ease) both; }
@keyframes am-abre { from { height: 48px; } }
.am-janela.pula .am-badge { animation: novas-pula .5s ease 2; }
.am-cab { display: flex; align-items: center; gap: .4rem; min-height: 48px; padding: .35rem .5rem .35rem .85rem; border-bottom: 1px solid transparent; flex-shrink: 0; }
#amigos:not(.aberto) .am-cab { cursor: pointer; }
#amigos:not(.aberto) .am-cab:hover { background: var(--sup-2); }
#amigos.aberto .am-cab { border-bottom-color: var(--linha); }
.am-tit { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; flex: 1; min-width: 0; }
.am-n-on { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 500; color: var(--apoio); }
.am-n-on i { width: 8px; height: 8px; border-radius: 50%; background: #30a46c; box-shadow: 0 0 0 2px var(--sup); }
.am-badge { min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 99px; background: var(--erro); color: #fff; font-size: .68rem; display: inline-grid; place-items: center; font-weight: 700; }
.am-cab-acoes { display: flex; gap: .1rem; margin-left: auto; }
.am-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--apoio); cursor: pointer; }
.am-ic:hover { background: var(--nevoa); color: var(--tinta); }
#amigos:not(.aberto) .am-cab-acoes .am-ic svg { transform: rotate(180deg); }
.am-quem { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.am-quem > span:last-child { flex: 1; min-width: 0; } .am-quem b { display: flex; align-items: center; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .am-quem small { color: var(--apoio); font-size: .7rem; }
.am-av { position: relative; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #52525b, #27272a); }
.am-av.peq { width: 30px; height: 30px; font-size: .7rem; }
.am-av.t-anual { background: linear-gradient(135deg, #3a3a42, #0a0a0c); } .am-av.t-semestral { background: linear-gradient(135deg, #36b06a, #23874c); }
.am-av.t-admin { background: linear-gradient(135deg, #ef5a5f, #cf3338); } .am-av.t-professor { background: var(--prof); }
/* status: bolinha à esquerda do nome (verde online, vermelha offline) */
.am-st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; vertical-align: .08em; flex-shrink: 0; }
.am-st.on { background: #30a46c; box-shadow: 0 0 0 0 rgba(48,164,108,.5); animation: am-pulso 2.4s ease-out infinite; }
.am-st.off { background: #e5484d; opacity: .85; }
@keyframes am-pulso { 0% { box-shadow: 0 0 0 0 rgba(48,164,108,.5); } 70%, 100% { box-shadow: 0 0 0 5px rgba(48,164,108,0); } }
.am-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.am-corpo.entra { animation: am-corpo .22s ease both; }
@keyframes am-corpo { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.am-corpo.entra-lado { animation: am-corpo-lado .24s var(--mola, ease) both; } @keyframes am-corpo-lado { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.am-sec { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); padding: .6rem .55rem .3rem; }
.am-pedido { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: 10px; background: color-mix(in srgb, var(--acento) 7%, transparent); margin-bottom: .25rem; }
.am-pedido .am-txt { color: inherit; text-decoration: none; }
.am-pedido .btn.peq { padding: .3rem .7rem; min-height: 30px; font-size: .8rem; }
/* aviso flutuante: "começou a seguir você" */
.am-notif { position: fixed; right: 1.25rem; bottom: 64px; z-index: 95; width: 350px; max-width: calc(100vw - 1.5rem); display: flex; gap: .7rem; align-items: flex-start; background: var(--sup); border: 1px solid var(--linha); border-radius: 14px; padding: .85rem; box-shadow: var(--sombra-alta); animation: aviso-sobe .32s var(--mola, ease) both; }
.am-notif.sai { animation: aviso-sai .22s ease-in forwards; }
.am-notif-tx { flex: 1; min-width: 0; } .am-notif-tx p { margin: 0; font-size: .9rem; } .am-notif-tx a { color: inherit; } .am-notif-tx small { color: var(--apoio); font-size: .78rem; }
.am-notif-bt { display: flex; gap: .4rem; margin-top: .6rem; } .am-notif-bt .btn { white-space: nowrap; padding: .35rem .75rem; min-height: 32px; font-size: .82rem; }
.am-notif-x { width: 26px; height: 26px; margin: -.3rem -.3rem 0 0; }
@media (max-width: 860px) { .am-notif { right: .75rem; left: .75rem; width: auto; bottom: calc(112px + env(safe-area-inset-bottom)); } }
.am-lista { overflow-y: auto; flex: 1; padding: .3rem; }
.am-item { display: flex; align-items: center; gap: .65rem; width: 100%; border: 0; background: none; text-align: left; padding: .55rem .5rem; border-radius: 10px; cursor: pointer; color: var(--tinta); font: inherit; }
.am-item:hover { background: var(--nevoa); }
.am-txt { flex: 1; min-width: 0; } .am-txt b { display: flex; align-items: center; font-size: .88rem; } .am-txt small { display: block; color: var(--apoio); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-item.nova .am-txt small { color: var(--tinta); font-weight: 600; }
.am-dir { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; } .am-dir time { font-size: .68rem; color: var(--suave); }
.am-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6rem; padding: 1.5rem; color: var(--apoio); font-size: .86rem; }
.am-vazio p { margin: 0; }
.am-msgs { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .35rem; background: var(--fundo); }
.am-dia { align-self: center; font-size: .68rem; color: var(--suave); margin: .4rem 0; text-transform: uppercase; letter-spacing: .06em; }
.am-msg { position: relative; max-width: 82%; align-self: flex-start; margin-top: .3rem; display: flex; flex-direction: column; align-items: flex-start; }
.am-msg.minha { align-items: flex-end; } .am-msg p { position: relative; }
.am-msg.nova { animation: cm-entra .22s var(--mola, ease) both; } .am-msg.minha.nova { animation-name: cm-entra-minha; }
.am-msg p { margin: 0; background: var(--sup); border: 1px solid var(--linha); padding: .45rem .7rem; border-radius: 14px 14px 14px 4px; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.am-msg.minha { align-self: flex-end; } .am-msg.minha p { background: var(--primario); color: var(--primario-tx); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.am-msg time { display: block; font-size: .64rem; color: var(--suave); margin: .15rem .3rem 0; } .am-msg.minha time { text-align: right; }
.am-form { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--linha); flex-shrink: 0; }
.am-form input { flex: 1; min-width: 0; border-radius: 99px; padding: .5rem .85rem; }
.am-enviar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--primario); color: var(--primario-tx); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: transform .15s; }
.am-enviar:active { transform: scale(.9); }
.am-aviso { margin: 0; padding: .7rem; text-align: center; font-size: .8rem; color: var(--apoio); border-top: 1px solid var(--linha); }
/* celular: barra menor acima das abas; aberta ocupa a largura */
@media (max-width: 860px) {
  #amigos { bottom: calc(62px + env(safe-area-inset-bottom)); right: .75rem; width: auto; }
  #amigos:not(.aberto) .am-janela { border-radius: 99px; border-bottom: 1px solid var(--linha); box-shadow: var(--sombra-alta); }
  #amigos:not(.aberto) .am-cab { min-height: 42px; padding: .2rem .5rem .2rem .9rem; }
  #amigos:not(.aberto) .am-cab-acoes { display: none; }
  #amigos.aberto { left: .5rem; right: .5rem; }
  #amigos.aberto .am-janela { border-radius: 16px; border-bottom: 1px solid var(--linha); height: min(520px, calc(100vh - 150px)); }
  #amigos.na-chat:not(.aberto) { display: none; }
}
@media (prefers-reduced-motion: reduce) { #amigos .am-janela, .am-msg, .am-corpo, .am-st, .am-notif { animation: none !important; } }

.chat-topo-acoes { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.btn.so-icone { padding: 0; width: 34px; min-width: 34px; justify-content: center; }
.mod-contexto { margin-top: .5rem; } .mod-contexto summary { cursor: pointer; font-size: .85rem; color: var(--apoio); }
.mod-contexto pre { white-space: pre-wrap; font-family: inherit; font-size: .82rem; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 10px; padding: .6rem .75rem; max-height: 260px; overflow: auto; margin: .4rem 0 0; }
/* amigos: cargo ao lado do nome, menu da conversa e histórico */
.am-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.am-cargo { display: inline-block; flex-shrink: 0; font-size: .56rem; letter-spacing: .06em; padding: .12rem .38rem; border-radius: 5px; line-height: 1.2; }
.am-janela { position: relative; }
.am-menu { position: absolute; top: 50px; right: .5rem; z-index: 3; min-width: 220px; background: var(--sup); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-alta); padding: .3rem; display: flex; flex-direction: column; animation: picker-abre .16s ease-out both; }
.am-menu a, .am-menu button { display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem; border: 0; background: none; border-radius: 8px; font: inherit; font-size: .86rem; color: var(--tinta); text-decoration: none; cursor: pointer; text-align: left; }
.am-menu a:hover, .am-menu button:hover { background: var(--nevoa); }
.am-menu .perigo { color: var(--erro); }
.am-antes { align-self: center; border: 1px solid var(--linha); background: var(--sup); color: var(--apoio); font: inherit; font-size: .75rem; padding: .3rem .8rem; border-radius: 99px; cursor: pointer; margin-bottom: .3rem; }
.am-antes:hover { color: var(--tinta); }
/* conversa animada: balões agrupados, reações, ✓✓, digitando, emojis */
.am-msgs { gap: 0; scroll-behavior: smooth; }
.am-msg.seq { margin-top: .12rem; }
.am-msg:not(.minha).tem-prox p { border-bottom-left-radius: 6px; } .am-msg:not(.minha).seq p { border-top-left-radius: 6px; }
.am-msg.minha.tem-prox p { border-bottom-right-radius: 6px; } .am-msg.minha.seq p { border-top-right-radius: 6px; }
.am-msg:not(.minha) p { cursor: pointer; transition: transform .15s var(--mola, ease), background-color .15s; }
@media (hover: hover) { .am-msg:not(.minha) p:hover { background: var(--sup-2); } }
.am-msg:not(.minha) p:active { transform: scale(.97); }
.am-msg.com-reacao { margin-bottom: .55rem; }
.am-reacao { position: absolute; bottom: -.75rem; right: -.25rem; font-size: .8rem; line-height: 1; background: var(--sup); border: 1px solid var(--linha); border-radius: 99px; padding: .12rem .28rem; box-shadow: var(--sombra); }
.am-msg.minha .am-reacao { right: auto; left: -.25rem; }
.am-msg.com-reacao time { margin-top: .5rem; }
.am-reacao.pop { animation: cr-pop .35s cubic-bezier(.2,1.6,.4,1) both; }
.am-reagir { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 2; display: flex; gap: .1rem; background: var(--sup); border: 1px solid var(--linha); border-radius: 99px; padding: .2rem; box-shadow: var(--sombra-alta); animation: picker-abre .18s cubic-bezier(.2,1.4,.4,1) both; transform-origin: bottom left; }
.am-reagir button { border: 0; background: none; font-size: 1.15rem; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; transition: transform .15s var(--mola, ease), background-color .15s; }
.am-reagir button:hover { transform: scale(1.25) translateY(-2px); } .am-reagir button.on { background: var(--nevoa); }
.am-reagir button:nth-child(2) { animation-delay: .02s; }
.am-tick { margin-left: .3rem; font-size: .66rem; letter-spacing: -.12em; color: var(--suave); transition: color .3s; }
.am-tick.visto { color: var(--acento); }
.am-digitando p { display: inline-flex; gap: .25rem; padding: .6rem .75rem !important; }
.am-digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--suave); animation: am-dig 1.2s ease-in-out infinite; }
.am-digitando i:nth-child(2) { animation-delay: .15s; } .am-digitando i:nth-child(3) { animation-delay: .3s; }
.am-digitando:not([hidden]) { animation: cm-entra .2s ease both; }
@keyframes am-dig { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.am-dig-tx { color: var(--sem-tx, #18794e); font-weight: 600; }
.am-arroba { color: var(--apoio); }
.am-quem:hover .am-nome { text-decoration: underline; text-underline-offset: 2px; }
.am-emojis { display: grid; grid-template-columns: repeat(9, 1fr); gap: .1rem; padding: .4rem .5rem; border-top: 1px solid var(--linha); animation: am-corpo .18s ease both; }
.am-emojis button { border: 0; background: none; font-size: 1.15rem; height: 32px; border-radius: 8px; cursor: pointer; transition: transform .12s var(--mola, ease); }
.am-emojis button:hover { background: var(--nevoa); transform: scale(1.15); } .am-emojis button.pop { animation: escolhe .3s var(--mola, ease); }
.am-emoji-bt { font-size: 1.05rem; filter: grayscale(.6); transition: filter .2s, transform .2s var(--mola, ease); } .am-emoji-bt.on, .am-emoji-bt:hover { filter: none; transform: rotate(-10deg) scale(1.1); }
.am-form { align-items: center; }
.am-enviar { opacity: .55; transform: scale(.92); transition: opacity .2s, transform .2s var(--mola, ease), background-color .2s; }
.am-form.pronto .am-enviar { opacity: 1; transform: none; }
.am-enviar.voa svg { animation: am-voa .45s cubic-bezier(.3,.7,.4,1); }
@keyframes am-voa { 0% { transform: none; } 45% { transform: translateX(14px) scale(.6); opacity: 0; } 46% { transform: translateX(-12px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.am-item { animation: am-corpo .26s ease both; animation-delay: calc(var(--i, 0) * 30ms); }
.am-item .am-av { transition: transform .2s var(--mola, ease); } @media (hover: hover) { .am-item:hover .am-av { transform: scale(1.06); } }
.am-oi .am-aceno { font-size: 2rem; display: inline-block; animation: am-aceno 1.6s ease-in-out 2; transform-origin: 70% 80%; }
@keyframes am-aceno { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
#amigos:not(.aberto) .am-janela { transition: transform .2s var(--mola, ease), box-shadow .2s; }
@media (hover: hover) { #amigos:not(.aberto) .am-janela:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .am-item, .am-reacao, .am-reagir, .am-digitando i, .am-emojis, .am-aceno, .am-enviar svg { animation: none !important; } }
.com-pedidos { border: 1px solid color-mix(in srgb, var(--acento) 30%, var(--linha)); background: color-mix(in srgb, var(--acento) 5%, var(--sup)); border-radius: 14px; padding: 1rem; }
.com-pedido { display: flex; flex-direction: column; gap: .4rem; } .com-pedido .linha-acoes { gap: .4rem; }
.am-quem small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-nome { flex: 0 1 auto; }
.feed-item .medalha.mini.ganha { border: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; padding: 0; }
/* faixa do cargo (ADMINISTRADOR, PROFESSOR, ALUNO ANUAL, ALUNO SEMESTRAL, ALUNO): igual em todo o site */
.tag-cargo:not(.pf-cargo) { font-size: .62rem; letter-spacing: .06em; font-weight: 700; padding: .14rem .45rem; border-radius: 5px; line-height: 1.2; }
/* linha do nome: o nome tem prioridade; se não couber, a faixa do cargo é que some (nunca cobre o nome) */
.am-linha-nome { display: flex !important; flex-wrap: wrap; align-items: center; height: 1.35em; overflow: hidden; row-gap: 4px; }
.am-linha-nome .am-nome { flex: 0 1 auto; max-width: 100%; }
.am-linha-nome .am-cargo { margin: 0 0 0 .4rem; }
/* topo da conversa organizado: seta | avatar | nome + cargo / @ + status | ações compactas */
#amigos.aberto .am-cab { gap: .5rem; padding: .45rem .4rem .45rem .45rem; }
#amigos.aberto .am-cab-acoes { gap: 0; }
#amigos.aberto .am-cab-acoes .am-ic { width: 28px; height: 28px; }
.am-quem { gap: .55rem; }
.am-quem small { margin-top: .1rem; line-height: 1.25; }
.am-linha-nome .am-cargo { margin-left: .45rem; }
/* conversa: linha 1 só o nome (inteiro); linha 2 cargo + @ + situação (a situação é que encurta) */
.am-quem .am-linha-nome { height: auto; overflow: visible; flex-wrap: nowrap; }
.am-quem .am-nome { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.am-linha-info { display: flex !important; align-items: center; gap: .4rem; min-width: 0; }
.am-linha-info .am-cargo { margin: 0; }
.am-linha-info #am-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* celular: barra de amigos some ao rolar para baixo; espaço no fim da página para ela não cobrir nada */
@media (max-width: 860px) {
  #amigos:not(.aberto) { transition: transform .28s var(--suave-mov, ease), opacity .28s; }
  #amigos.escondido:not(.aberto) { transform: translateY(calc(100% + 80px)); opacity: 0; pointer-events: none; }
  .view { padding-bottom: 8.5rem; }
}
.am-cargo { font-size: .54rem !important; padding: .1rem .35rem !important; }
.pf-fixo { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; padding: .8rem 1rem; border: 1px solid var(--linha); border-radius: 12px; background: var(--sup-2); margin-bottom: 1rem; }
.pf-fixo small { display: block; color: var(--apoio); font-size: .75rem; } .pf-fixo p { grid-column: 1 / -1; margin: 0; }
input[readonly] { background: var(--sup-2); color: var(--apoio); cursor: not-allowed; }
.faixa-email { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--aviso-bg); color: var(--aviso); border: 1px solid color-mix(in srgb, var(--aviso) 25%, transparent); border-radius: 12px; padding: .6rem .8rem; margin-bottom: 1.25rem; font-size: .88rem; }
.faixa-email span { flex: 1; min-width: 200px; } .faixa-email b { color: inherit; }
.trocar-email summary { cursor: pointer; color: var(--acento-tx); font-weight: 600; font-size: .9rem; }
.arroba-status { display: block; min-height: 1.2em; font-size: .8rem; color: var(--apoio); }
.arroba-status.ok { color: var(--ok); font-weight: 600; } .arroba-status.erro { color: var(--erro); font-weight: 600; }
.arroba-aviso { display: flex !important; gap: .35rem; align-items: flex-start; color: var(--aviso) !important; background: var(--aviso-bg); border-radius: 8px; padding: .45rem .6rem; margin-top: .3rem; }
.arroba-aviso svg { flex-shrink: 0; margin-top: .15rem; }
.abas-q { margin-bottom: 1.25rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .abas-q a small { margin-left: .2rem; font-size: .62rem; }
/* seções do menu com cor: Aluno (roxo, cor que não é de nenhum plano), Professor (azul), Administração (vermelho) — as cores das faixas de cargo */
.sec-aluno { --sec: #7c5cf0; } .sec-prof { --sec: var(--prof); } .sec-adm { --sec: var(--adm); }
.menu .alternar-adm .sec-cor { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sec); margin-right: .5rem; vertical-align: .05em; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec) 18%, transparent); }
.menu .alternar-adm > span { color: color-mix(in srgb, var(--sec) 75%, var(--tinta)); }
.menu-adm[class*="sec-"] { margin-left: .55rem; padding-left: .35rem; border-left: 2px solid color-mix(in srgb, var(--sec) 35%, transparent); }
.menu-adm[class*="sec-"] a[aria-current="page"] svg { color: var(--sec); }
/* celular: menu completo numa folha que sobe de baixo */
dialog.folha { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 85vh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
dialog.folha[open] { animation: folha-sobe .28s var(--mola, ease) both; }
@keyframes folha-sobe { from { transform: translateY(100%); } to { transform: none; } }
.menu-celular { display: flex; flex-direction: column; gap: 1px; }
.menu-celular a { display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem; border-radius: 10px; color: var(--tinta); text-decoration: none; }
.menu-celular a[aria-current="page"] { background: var(--nevoa); font-weight: 600; }
/* foto de perfil (aprovada pela administração) */
.com-foto { overflow: hidden; padding: 0 !important; }
.com-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.pf-foto-edit { display: flex; gap: 1rem; align-items: center; padding: .9rem; border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 1rem; }
.pf-foto-edit .pf-avatar { width: 72px; height: 72px; font-size: 1.4rem; color: #fff; flex-shrink: 0; }
.pf-foto-edit p { margin: .2rem 0 .5rem; }
.pf-foto-edit label.btn { cursor: pointer; }
.fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.foto-card { border: 1px solid var(--linha); border-radius: 14px; padding: 1rem; background: var(--sup); display: flex; flex-direction: column; gap: .6rem; }
.foto-card .fc-imgs { display: flex; gap: .75rem; align-items: center; }
.foto-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--linha); }
.foto-card .fc-antes { width: 52px; height: 52px; opacity: .7; }
/* avatar da galeria e banner */
.com-preset { color: #fff; } .com-preset svg { width: 46%; height: 46%; }
.pf-hero.com-banner { background-size: cover !important; background-position: center !important; }
.pf-hero.com-banner::after { display: none; }
.pf-visual { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.pf-vis-sec { border: 1px solid var(--linha); border-radius: 14px; padding: .9rem; display: flex; flex-direction: column; gap: .7rem; }
.pf-vis-cab { display: flex; gap: .9rem; align-items: center; } .pf-vis-cab .pf-avatar { width: 68px; height: 68px; font-size: 1.3rem; color: #fff; flex-shrink: 0; }
.pf-vis-sec p { margin: .2rem 0 .5rem; } .pf-vis-sec label.btn { cursor: pointer; }
.galeria-av { display: grid; grid-template-columns: repeat(8, 44px); justify-content: space-between; gap: .45rem; }
@media (max-width: 560px) { .galeria-av { grid-template-columns: repeat(4, 44px); justify-content: space-around; row-gap: .7rem; } }
.galeria-av button, .galeria-bn button { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; transition: transform .15s var(--mola, ease), box-shadow .15s; }
.galeria-av button .pf-avatar { width: 44px; height: 44px; }
.galeria-av button:hover, .galeria-bn button:hover { transform: scale(1.08); }
.galeria-av button.on { box-shadow: 0 0 0 3px var(--sup), 0 0 0 5px var(--acento); }
.galeria-bn { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .45rem; }
.galeria-bn button { aspect-ratio: 3 / 1; border-radius: 8px; }
.galeria-bn button.on { box-shadow: 0 0 0 2px var(--sup), 0 0 0 4px var(--acento); }
.pf-banner-previa { aspect-ratio: 3 / 1; border-radius: 10px; background: radial-gradient(120% 140% at 0% 0%, #2a2a33 0%, #0b0b0e 60%); background-size: cover; background-position: center; }
.foto-card .fc-banner { width: 100%; aspect-ratio: 3 / 1; height: auto; border-radius: 10px; }
/* fotinha do avatar nas mensagens (Chat Geral e conversa com amigos) */
.cm { padding-left: 2.75rem; }
.cm-av.am-av { position: absolute; left: .5rem; top: .45rem; width: 28px; height: 28px; font-size: .62rem; }
.cm-av.com-preset svg { width: 52%; height: 52%; }
.am-msg:not(.minha):not(.am-digitando) { margin-left: 30px; }
.am-msg-av.am-av.peq { position: absolute; left: -30px; bottom: 0; width: 24px; height: 24px; font-size: .55rem; pointer-events: none; }
.am-msg-av.com-preset svg { width: 54%; height: 54%; }
/* perfil para quem não tem conta: resumido, com o convite */
.pf-nums-curto { grid-template-columns: repeat(3, 1fr) !important; }
.pf-convite { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--linha); border-radius: 16px; background: var(--sup); animation: cm-entra .4s var(--mola, ease) .1s both; }

.pf-convite h2 { font-size: 1.15rem; margin: 0 0 .3rem; } .pf-convite p { margin: 0; max-width: 46ch; }
.pf-convite-botoes { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 560px) { .pf-convite { text-align: center; } .pf-convite-botoes, .pf-convite-botoes .btn { width: 100%; } .pf-nums-curto .pf-num small { font-size: .7rem; } }
.pf-med-convite { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; }
/* editar perfil no celular: avatar e banners compactos, sem rolagem longa */
.pf-vis-acoes { gap: .4rem; }
.pf-vis-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; } .pf-vis-titulo .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .pf-vis-sec { padding: .75rem; gap: .6rem; }
  .pf-vis-cab { gap: .7rem; align-items: flex-start; } .pf-vis-cab .pf-avatar { width: 54px; height: 54px; font-size: 1.05rem; }
  .pf-vis-cab p { font-size: .8rem; margin: .15rem 0 .45rem; }
  .pf-vis-acoes { display: grid; grid-template-columns: 1fr 1fr; }
  .pf-vis-acoes .btn.peq, .pf-vis-titulo .btn.peq { padding: .45rem .5rem; font-size: .8rem; justify-content: center; }
  .pf-vis-acoes .btn.peq:only-child { grid-column: 1 / -1; }
  .galeria-av { grid-template-columns: repeat(4, 1fr); justify-items: center; row-gap: .55rem; }
  .galeria-av button .pf-avatar { width: 42px; height: 42px; }
  .pf-banner-previa { aspect-ratio: 4 / 1; }
  .galeria-bn { grid-template-columns: repeat(4, 1fr); gap: .35rem; }
  .galeria-bn button { aspect-ratio: 2 / 1; border-radius: 6px; }
}
/* links enviados no chat: marcados e com aviso antes de abrir */
a.link-externo { color: var(--acento-tx); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
a.link-externo svg { vertical-align: -1px; margin-right: .2rem; color: var(--aviso, #d97706); }
.am-msg.minha a.link-externo { color: inherit; } .am-msg.minha a.link-externo svg { color: inherit; }
.aviso-link { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 12px; background: var(--aviso-bg, #fff7ed); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--aviso, #d97706) 35%, transparent); }
.aviso-link > svg { color: var(--aviso, #d97706); flex-shrink: 0; margin-top: .1rem; } .aviso-link p { margin: 0; font-size: .9rem; line-height: 1.5; }
.link-destino { margin: .9rem 0 0; display: flex; flex-direction: column; gap: .1rem; } .link-destino small { color: var(--suave); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.link-destino span { color: var(--apoio); font-size: .8rem; overflow-wrap: anywhere; }