/* =====================================================================
   Ágora — acabamento "premium", inspirado na logo
   Azul-marinho profundo, azul-celeste e dourado; títulos em Montserrat.
   Só usa os tokens (--ag-*): os temas da aba Aparência continuam valendo.
   ===================================================================== */

/* ---------- tipografia ---------- */
body { font-family: var(--ag-fonte-texto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, .marca-nome { font-family: var(--ag-fonte-titulo); }
h1 { font-weight: 800; letter-spacing: -.02em; }
h2 { font-weight: 700; letter-spacing: -.015em; }
h3 { font-weight: 700; letter-spacing: -.005em; }

/* ---------- menu lateral ---------- */
.lateral {
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--ag-destaque) 26%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--ag-menu-fundo) 0%, var(--ag-menu-fundo-2) 100%);
  border-right: 1px solid color-mix(in srgb, var(--ag-secundaria) 28%, transparent);
}
html.ag-menu-claro .lateral { background: var(--ag-menu-fundo); border-right-color: var(--ag-borda); }
.lateral .marca-linha { gap: .5rem; padding-bottom: .2rem; }
.lateral .marca-logo, .marca-logo {
  width: 76px; height: 76px; border-radius: 0; object-fit: contain; background: none; box-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
.lateral .marca-nome {
  font-weight: 800; font-size: 1.9rem; letter-spacing: .08em; line-height: 1; color: #fff; position: relative; padding-bottom: .35rem;
}
html.ag-menu-claro .lateral .marca-nome { color: var(--ag-primaria); }
/* o arco dourado da logo, embaixo do nome */
.lateral .marca-nome::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 64%; height: 3px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--ag-secundaria) 22%, var(--ag-secundaria) 78%, transparent);
}
.lateral .marca-sub {
  font-family: var(--ag-fonte-titulo); font-weight: 600; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.45; max-width: 14rem; margin-top: .45rem;
}
.nav-item { font-weight: 600; transition: background var(--ag-transicao), color var(--ag-transicao), transform var(--ag-transicao); }
.nav-item:hover { transform: translateX(2px); }
.nav-item.ativo {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ag-menu-ativo) 82%, #fff) 0%, var(--ag-menu-ativo) 55%, color-mix(in srgb, var(--ag-menu-ativo) 82%, #000) 100%);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ag-menu-ativo) 90%, #000), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.rotulo-lateral { letter-spacing: .12em; }
@media (max-width: 900px) { .lateral .marca-logo { width: 62px; height: 62px; } .lateral .marca-nome { font-size: 1.6rem; } }
html.ag-menu-compacto .lateral .marca-logo { width: 46px; height: 46px; }

/* ---------- botões ---------- */
/* brilho por cima da cor de cada botão (não troca a cor: vale para azul, vermelho, dourado…) */
.btn:not(.btn-sec):not(.btn-fantasma):not(.btn-link):not(.btn-claro):not(.btn-exp) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .06) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -10px rgba(6, 30, 60, .55);
}
.btn { font-weight: 700; letter-spacing: .005em; transition: transform var(--ag-transicao), box-shadow var(--ag-transicao), filter var(--ag-transicao), background-color var(--ag-transicao); }
.btn:not(.btn-sec):not(.btn-fantasma):not(.btn-link):not(.btn-claro):not(.btn-exp):hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 14px 24px -12px rgba(6, 30, 60, .6); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-sec { font-weight: 700; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ag-foco) 85%, transparent); outline-offset: 2px; }

/* ---------- cartões ---------- */
.bloco, .turma-cartao, .cartao-item, .acao, .resumo-num {
  border: 1px solid var(--ag-borda);
  box-shadow: 0 1px 2px rgba(11, 30, 60, .04), 0 10px 28px -18px rgba(11, 30, 60, .22);
}
html.ag-escuro .bloco, html.ag-escuro .turma-cartao, html.ag-escuro .cartao-item, html.ag-escuro .acao { box-shadow: var(--ag-sombra); }
.acao { transition: transform var(--ag-transicao), box-shadow var(--ag-transicao), border-color var(--ag-transicao); }
.acao:hover { box-shadow: 0 2px 4px rgba(11, 30, 60, .05), 0 18px 34px -18px rgba(11, 30, 60, .35); }
.acao-ic { color: var(--ag-primaria); }
.acao:hover .acao-ic { color: var(--ag-destaque); }

/* ---------- boas-vindas (hero) ---------- */
.hero {
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--ag-destaque) 45%, transparent) 0%, transparent 60%),
    radial-gradient(50% 90% at 0% 100%, color-mix(in srgb, var(--ag-secundaria) 22%, transparent) 0%, transparent 65%),
    linear-gradient(120deg, var(--ag-primaria-escura) 0%, var(--ag-primaria) 70%);
  box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--ag-primaria-escura) 90%, #000);
  border: 1px solid color-mix(in srgb, var(--ag-secundaria) 22%, transparent);
}
.hero h1 { font-weight: 800; letter-spacing: -.025em; }
.hero-frase { font-family: var(--ag-fonte-texto); font-style: italic; opacity: .85; }
.hero-logo { border-radius: 0 !important; background: none !important; box-shadow: none !important; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); }
html.ag-escuro img.marca-logo, html.ag-escuro .hero-logo { background: none; }

/* ---------- telas de entrada (aluno e professor) ---------- */
body.pagina-entrada { background: var(--ag-fundo); }
/* fundo com as cores da marca (curvas azuis e douradas, símbolo em marca-d'água) */
.entrada.com-capa .capa::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 42%, rgba(255, 255, 255, .45) 0%, transparent 70%); }
.capa img { object-position: 70% 50%; filter: none; }
@media (max-width: 700px) { .capa img { object-position: 60% 50%; } }
.entrada-logo { display: block; width: min(100%, 400px); height: auto; margin: 0 auto .4rem; filter: drop-shadow(0 10px 18px rgba(11, 59, 112, .16)); }
.entrada.com-capa .entrada-cartoes { width: min(100%, 460px); padding: 1.2rem 0 2rem; }
.cartao-entrada, .entrada.com-capa .cartao-entrada {
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--ag-borda); border-top: 0; position: relative; overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(11, 30, 60, .05), 0 30px 60px -28px rgba(11, 30, 60, .38);
  backdrop-filter: blur(6px);
}
.cartao-entrada::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--ag-primaria) 0%, var(--ag-destaque) 50%, var(--ag-secundaria) 100%);
}
.cartao-entrada h2 { font-weight: 800; font-size: 1.45rem; color: var(--ag-primaria); }
.frase-anisio { color: var(--ag-texto-2); }
@media (max-width: 520px) { .entrada-logo { width: min(86%, 320px); } }

/* ---------- topo do aluno ---------- */
.topo-marca { align-items: center; font-family: var(--ag-fonte-titulo); letter-spacing: .02em; }
.topo-simbolo { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }

/* ---------- coordenação ---------- */
.cd-entrada-arte img { width: 120px !important; height: 120px !important; object-fit: contain; border-radius: 0; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); }
.cd-entrada-arte h1 { font-family: "Montserrat", "Inter", sans-serif; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cd-marca img { object-fit: contain; border-radius: 0; }

/* ---------- detalhes ---------- */
::selection { background: color-mix(in srgb, var(--ag-secundaria) 40%, transparent); }
.selo, .chip { font-weight: 700; }

/* ---------- acessibilidade (contraste mínimo WCAG AA) ---------- */
.perfil-foto.vazia, .topo-perfil .perfil-foto.vazia { background: linear-gradient(135deg, color-mix(in srgb, var(--ag-secundaria) 85%, #fff), var(--ag-secundaria)); color: #1B1406; }
.data-bolha small { color: var(--ag-texto-2); }
.t-desafio { --cor-tipo: #9A4A16; }
.aviso-teste { background: #FDECEA; color: #8C1D17; border: 1px solid #F3C2BD; border-radius: 10px; padding: .55rem .75rem; font-size: .88rem; margin: .4rem 0 .6rem; text-align: left; }
/* o fundo fica preso à tela (não aumenta quando a página é comprida) */
.entrada.com-capa .capa { position: fixed; }
.entrada.com-capa .entrada-prof, .entrada.com-capa .frase-anisio { background: rgba(255, 255, 255, .82); border-radius: 12px; padding: .35rem .8rem; backdrop-filter: blur(4px); }

/* ---------- coordenação: entrada e ativação (moldura com a marca) ---------- */
.cd-onb {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: start center; padding: clamp(1.2rem, 4vh, 3rem) 1rem 2rem;
  background: #EEF3F9 url("../assets/fundo-login.webp") center / cover no-repeat fixed;
}
@media (max-width: 700px) { .cd-onb { background-image: url("../assets/fundo-login-estreito.webp"); background-attachment: scroll; } }
.cd-onb-centro { width: min(100%, 460px); display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.cd-onb-centro.largo { width: min(100%, 620px); }
.cd-onb-logo { width: min(100%, 360px); height: auto; filter: drop-shadow(0 10px 18px rgba(11, 59, 112, .16)); }
.cd-onb-selo {
  margin: -.2rem 0 .2rem; padding: .3rem .9rem; border-radius: 999px; font: 700 .72rem/1 "Montserrat", "Inter", sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #6A4A00; background: linear-gradient(180deg, #FFF3CF, #F8DE93); border: 1px solid #EAC45B;
}
.cd-passos { list-style: none; display: flex; gap: .3rem; padding: .35rem; margin: 0; width: 100%; border-radius: 14px; background: rgba(255, 255, 255, .8); border: 1px solid #DCE3EE; backdrop-filter: blur(6px); }
.cd-passos li { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .3rem; border-radius: 10px; font: 600 .8rem/1.1 "Inter", sans-serif; color: #5A6B82; }
.cd-passo-num { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-weight: 800; font-size: .74rem; background: #E2EBF6; color: #0B3B70; flex: none; }
.cd-passos li.feito .cd-passo-num { background: #2E7D32; color: #fff; }
.cd-passos li.atual { background: #0B3B70; color: #fff; box-shadow: 0 8px 18px -10px rgba(6, 30, 60, .7); }
.cd-passos li.atual .cd-passo-num { background: #EBAA10; color: #1B1406; }
@media (max-width: 520px) { .cd-passos li:not(.atual) .cd-passo-txt { display: none; } }
.cd-onb-cartao {
  width: 100%; position: relative; overflow: hidden; padding: 1.8rem clamp(1.2rem, 4vw, 2rem) 1.5rem; border-radius: 18px;
  background: rgba(255, 255, 255, .97); border: 1px solid #DCE3EE; box-shadow: 0 1px 2px rgba(11, 30, 60, .05), 0 30px 60px -28px rgba(11, 30, 60, .38);
}
.cd-onb-cartao::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #0B3B70 0%, #1582C5 50%, #EBAA10 100%); }
.cd-onb-titulo { font: 800 1.55rem/1.2 "Montserrat", "Inter", sans-serif; letter-spacing: -.02em; color: #0B3B70; margin: 0 0 .35rem; text-align: center; }
.cd-onb-sub { color: #46536A; text-align: center; margin: 0 auto 1.1rem; max-width: 40ch; line-height: 1.5; }
.cd-onb-icone { font-size: 2.4rem; text-align: center; margin-bottom: .2rem; }
.cd-onb-cartao .cd-entrada-form { margin: .4rem 0 0; gap: .85rem; }
.cd-onb-cartao .btn-grande { width: 100%; }
.cd-dica { display: block; margin-top: .3rem; color: #67748A; font-size: .8rem; font-weight: 400; }
.cd-conta { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; margin: .2rem 0 .6rem; border-radius: 12px; background: #F3F6FA; border: 1px solid #DCE3EE; }
.cd-conta-ini { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none; font: 800 .8rem/1 "Montserrat", sans-serif; color: #1B1406; background: linear-gradient(135deg, #F8D873, #EBAA10); }
.cd-conta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-conta-txt small { color: #67748A; font-size: .75rem; }
.cd-conta-txt strong { color: #0F1E33; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-onb-cartao > .cd-conta:last-child { margin: 1.2rem 0 0; }
.cd-inep-linha { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: start; }
.cd-inep-linha .btn-grande { width: auto; margin-top: 1.55rem; white-space: nowrap; }
@media (max-width: 560px) { .cd-inep-linha { grid-template-columns: 1fr; } .cd-inep-linha .btn-grande { width: 100%; margin-top: 0; } }
.cd-inep { font: 700 1.25rem/1.2 "Montserrat", "Inter", sans-serif; letter-spacing: .18em; }
.cd-onb-cartao .ct-bloco { margin-top: 1rem; padding: 1rem; border-radius: 14px; border: 1px solid #DCE3EE; background: #FAFCFE; }
.cd-aviso-suave { padding: .8rem 1rem; border-radius: 12px; background: #FDF2D3; border: 1px solid #F1D58A; color: #5A4300; line-height: 1.5; margin-bottom: 1rem; }
.cd-onb-acoes { display: flex; flex-direction: column; gap: .5rem; }
.cd-beneficios { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.cd-beneficios li { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem; border-radius: 10px; background: #F3F6FA; font-size: .82rem; font-weight: 600; color: #24324A; }
.cd-onb-rodape { margin: .2rem 0 0; padding: .35rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .82); font-size: .85rem; color: #46536A; }
.cd-onb-rodape a { color: #0B3B70; }
.cd-onb-cartao .ct-bloco .btn { width: 100%; margin-top: .4rem; }
html:has(.cd-onb) { background: #EEF3F9; }
.cd-ajuda { margin: -.3rem 0 1rem; padding: .6rem .9rem; border-radius: 12px; background: #F3F6FA; border: 1px solid #DCE3EE; font-size: .9rem; color: #24324A; }
.cd-ajuda summary { cursor: pointer; font-weight: 700; color: #0B3B70; }
.cd-ajuda ol { margin: .5rem 0 0; padding-left: 1.2rem; line-height: 1.55; }

/* ---------- faixa com o nome da aba (arte em assets/faixas/) ---------- */
.faixa-aba {
  position: relative; display: block; box-sizing: border-box; aspect-ratio: var(--faixa-ar, 1057 / 132); margin: 1.2rem auto -.6rem;
  width: calc(min(100%, 1280px) - 2 * clamp(1rem, 2.6vw, 2.2rem));
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  filter: drop-shadow(0 10px 18px rgba(11, 30, 60, .14));
}
.faixa-aba[hidden] { display: none; }
.faixa-titulo {
  position: absolute; left: var(--faixa-x, 13.6%); right: var(--faixa-r, 34%); top: var(--faixa-y, 45%); transform: translateY(-50%); margin: 0;
  font: 800 clamp(1.05rem, 2.6vw, 2.15rem)/1.05 var(--ag-fonte-titulo); letter-spacing: -.01em; color: #0B3B70;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* com a faixa, o título repetido do cabeçalho da aba sai (fica só a explicação e os botões) */
body.tem-faixa h1.titulo-repetido { display: none; }
body.tem-faixa .ag-cabeca-aba:has(h1.titulo-repetido) .ag-cabeca-ic { display: none; }
html.ag-escuro .faixa-titulo { color: #0B3B70; }

/* ---------- "Abrindo o Ágora…" enquanto o painel carrega ---------- */
.abrindo { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: radial-gradient(60% 50% at 50% 40%, #FFFFFF 0%, #EEF3F9 70%); transition: opacity .25s; text-align: center; padding: 1rem; }
.abrindo.saindo { opacity: 0; pointer-events: none; }
.abrindo img { width: 96px; height: 96px; filter: drop-shadow(0 10px 18px rgba(11, 59, 112, .22)); animation: abrindo-pulsa 1.6s ease-in-out infinite; }
.abrindo-msg { font: 700 1.05rem/1.4 "Montserrat", "Inter", sans-serif; color: #0B3B70; margin: .4rem 0 0; }
.abrindo-roda { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #DCE3EE; border-top-color: #EBAA10; animation: abrindo-gira .8s linear infinite; }
.abrindo-acoes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .6rem; }
.abrindo-acoes[hidden] { display: none; }
@keyframes abrindo-gira { to { transform: rotate(360deg); } }
@keyframes abrindo-pulsa { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .abrindo img, .abrindo-roda { animation: none; } }