/* ==========================================================================
   Margarida On — Sistema visual
   Extraído do protótipo aprovado (Claude Design). Paleta "livresca":
   azul como marca, dourado/verde/coral como acentos, fundo creme.
   Fontes: Baloo 2 (títulos) + Nunito Sans (corpo), carregadas no base.html.
   Este arquivo é carregado DEPOIS do Bootstrap para sobrescrever o tema.
   ========================================================================== */

:root {
  /* Fundos e superfícies */
  --bg: #FBF7EF;
  --surface: #FFFFFF;

  /* Marca (azul) e acentos */
  --marca: #1F6FA0;
  --marca-escuro: #175578;
  --dourado: #E3A63E;
  --dourado-escuro: #c7902f;
  --verde: #4E9B5A;
  --verde-escuro: #3d7d48;
  --coral: #D14F35;

  /* Texto */
  --titulo: #33231A;
  --tinta: #3D2B1E;
  --muted: rgba(61, 43, 30, .60);
  --muted-forte: rgba(61, 43, 30, .72);
  --linha: rgba(61, 43, 30, .08);

  /* Superfícies de acento suave (fundos de ícone) */
  --tint-dourado: #FBF0DC;
  --tint-coral: #FBEAE6;
  --tint-azul: #E8F1F7;
  --tint-verde: #E9F3EC;

  /* Roxo: usado só no selo do rank A (não faz parte da identidade base) */
  --roxo: #7B4BA8;
  --tint-roxo: #F1E9F8;

  /* Formas */
  --raio-card: 22px;
  --raio-btn: 999px;
  --sombra: 0 4px 20px rgba(61, 43, 30, .05);
  --sombra-forte: 0 12px 26px rgba(61, 43, 30, .10);
}

body {
  background-color: var(--bg);
  color: var(--tinta);
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6,
.font-display, .titulo-secao {
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--titulo);
  font-weight: 700;
}

/* --- Navbar --- */
.navbar-margarida {
  background-color: var(--surface);
  border-bottom: 1px solid var(--linha);
}
.navbar-margarida .navbar-brand {
  font-family: 'Baloo 2', sans-serif;
  color: var(--marca);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.1;
}
.navbar-margarida .navbar-brand small {
  display: block;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
  font-size: .72rem;
  color: var(--muted);
}
.navbar-brand img { height: 44px; width: auto; display: block; }

/* A marca é uma frase inteira, não uma palavra. O Bootstrap põe
   `white-space: nowrap` na .navbar-brand, o que empurraria a navbar para
   fora da tela do celular — e é no celular que o aluno acessa. Deixa
   quebrar em duas linhas e encolhe um pouco na tela estreita. */
.navbar-margarida .navbar-brand { white-space: normal; }
@media (max-width: 575.98px) {
  .navbar-margarida .navbar-brand { font-size: 1.02rem; }
  .navbar-margarida .navbar-brand small { font-size: .68rem; }
  .navbar-brand img { height: 36px; }
}
.navbar-margarida .nav-link { color: var(--tinta); font-weight: 700; }
.navbar-margarida .nav-link:hover,
.navbar-margarida .nav-link.active { color: var(--marca); }
.nav-link-destaque {
  font-weight: 800;
  color: var(--titulo) !important;
  border-bottom: 2px solid var(--dourado);
  padding-bottom: 2px !important;
}

/* --- Botões (pílula) --- */
.btn { border-radius: var(--raio-btn); font-family: 'Baloo 2', sans-serif; font-weight: 700; }
.btn-lg { padding: .75rem 2rem; }

.btn-marca { background-color: var(--marca); border-color: var(--marca); color: #fff; }
.btn-marca:hover, .btn-marca:focus { background-color: var(--marca-escuro); border-color: var(--marca-escuro); color: #fff; }

.btn-azul { background-color: var(--marca); border-color: var(--marca); color: #fff; }
.btn-azul:hover { background-color: var(--marca-escuro); border-color: var(--marca-escuro); color: #fff; }

.btn-dourado { background-color: var(--dourado); border-color: var(--dourado); color: #fff; }
.btn-dourado:hover { background-color: var(--dourado-escuro); border-color: var(--dourado-escuro); color: #fff; }

.btn-verde { background-color: var(--verde); border-color: var(--verde); color: #fff; }
.btn-verde:hover { background-color: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }

.btn-contorno {
  background: var(--surface);
  border: 2px solid var(--marca);
  color: var(--marca);
}
.btn-contorno:hover { background: var(--tint-azul); border-color: var(--marca); color: var(--marca-escuro); }

.btn-marca, .btn-azul, .btn-dourado, .btn-verde {
  box-shadow: 0 8px 20px rgba(31, 111, 160, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-marca:hover, .btn-azul:hover, .btn-dourado:hover, .btn-verde:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(31, 111, 160, .30);
}

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-escuro); text-decoration: underline; }

/* --- Cards --- */
.card {
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  background: var(--surface);
  box-shadow: var(--sombra);
}

/* --- Pílulas e barra de XP --- */
.pilula-nivel {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--marca); color: #fff;
  font-family: 'Baloo 2', sans-serif; font-weight: 700;
  padding: .2rem .8rem; border-radius: 999px; font-size: .85rem;
}
.pilula-suave {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--tint-azul); color: var(--marca);
  font-weight: 800; font-size: .8rem; letter-spacing: .02em;
  padding: .45rem 1rem; border-radius: 999px;
}
.xp-trilho { background: var(--linha); border-radius: 999px; height: 12px; overflow: hidden; }
.xp-preenchimento {
  background: linear-gradient(90deg, var(--dourado), #F4C868);
  height: 100%; border-radius: 999px;
}

/* --- Foco de teclado visível --- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.bloco-papel:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
  border-radius: 12px;
}

/* --- Rodapé --- */
.rodape {
  background-color: var(--surface);
  color: var(--muted);
  border-top: 1px solid var(--linha);
}
.rodape a { color: var(--marca); }
/* Link do rodapé (privacidade): discreto, no tom do rodapé. */
.rodape-link { color: var(--muted); text-decoration: underline; }
.rodape-link:hover { color: var(--marca); }

/* ==========================================================================
   Componentes da landing
   ========================================================================== */

/* Halos decorativos do hero */
.mgl-hero { position: relative; overflow: hidden; }
.mgl-hero::before,
.mgl-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
/* Os halos ficam quase inteiros DENTRO da caixa, e o gradiente termina aos
   55% — bem antes da borda. Antes eles eram jogados para fora (right:-120px,
   left:-140px) e o gradiente só zerava aos 70%: o `overflow: hidden` cortava
   onde ainda havia cor, e o corte aparecia como uma aresta reta na tela (a
   "linha" ao lado dos botões e o bloco claro atrás da Margaridinha). */
.mgl-hero::before {
  top: -40px; right: -30px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(31,111,160,.14), rgba(31,111,160,0) 55%);
}
.mgl-hero::after {
  bottom: -50px; left: -40px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(227,166,62,.12), rgba(227,166,62,0) 55%);
}
.mgl-hero > * { position: relative; z-index: 1; }

/* Em tela larga as duas colunas se afastavam até sobrar um vão no meio: o
   texto para de crescer (o parágrafo é limitado a 30rem) e a Margaridinha
   fica centrada na metade dela, lá na direita. Enquanto o título tinha uma
   segunda linha longa isso não aparecia, porque ele mesmo esticava a coluna.
   Limitar a seção mantém os dois por perto em qualquer monitor, sem depender
   do comprimento do texto. Vai na seção, e não na .row: `margin-inline: auto`
   numa .row anularia as margens negativas com que o Bootstrap compensa os
   gutters, e as colunas ganhariam um recuo indevido. */
.mgl-hero { max-width: 1060px; margin-inline: auto; }

.mgl-hero-titulo {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.05; color: var(--titulo);
}
.mgl-hero-titulo .destaque { color: var(--marca); }
.mgl-hero-sub { font-size: 1.18rem; line-height: 1.6; color: var(--muted-forte); max-width: 30rem; }

/* Cartões de recurso ("Como funciona") */
.mgl-feature {
  background: var(--surface); border-radius: var(--raio-card);
  padding: 2rem 1.6rem; border: 1px solid var(--linha); box-shadow: var(--sombra);
  transition: transform .25s ease, box-shadow .25s ease; height: 100%;
}
.mgl-feature:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(61,43,30,.12); }
.mgl-ficone {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff;
}

/* Superfícies de acento (usadas em ícones/tiles) */
.tint-dourado { background: var(--tint-dourado); color: var(--dourado); }
.tint-coral { background: var(--tint-coral); color: var(--coral); }
.tint-azul { background: var(--tint-azul); color: var(--marca); }
.tint-verde { background: var(--tint-verde); color: var(--verde); }
.txt-dourado { color: var(--dourado); }
.txt-coral { color: var(--coral); }
.txt-azul { color: var(--marca); }
.txt-verde { color: var(--verde); }

/* Faixa de segurança / LGPD */
.mgl-safety { background: var(--tint-azul); border-radius: var(--raio-card); }

/* Badges flutuantes do hero */
.mgl-badge {
  background: #fff; border-radius: 14px; box-shadow: 0 8px 20px rgba(61,43,30,.14);
  padding: .6rem 1rem; display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: .85rem; color: var(--titulo);
}

/* Card de boas-vindas do dashboard */
.mgl-welcome {
  position: relative; background: var(--marca); border-radius: 28px;
  padding: 2.2rem 2.4rem; overflow: hidden; color: #fff;
}
.mgl-welcome::before,
.mgl-welcome::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); }
.mgl-welcome::before { top: -60px; right: -40px; width: 220px; height: 220px; }
.mgl-welcome::after { bottom: -80px; left: 34%; width: 180px; height: 180px; }
.mgl-welcome h1, .mgl-welcome h2 { color: #fff; }
.mgl-welcome .xp-trilho { background: rgba(255,255,255,.25); position: relative; }

/* Stat tiles do dashboard */
.mgl-stat {
  background: var(--surface); border-radius: 20px; padding: 1.4rem;
  display: flex; align-items: center; gap: 1rem; border: 1px solid var(--linha);
  box-shadow: var(--sombra); height: 100%;
  transition: transform .22s ease, box-shadow .22s ease;
}
.mgl-stat:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); }
.mgl-stat-icone {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.mgl-stat-valor { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--titulo); line-height: 1; }
.mgl-stat-rotulo { font-size: .82rem; color: var(--muted); }

.avatar-dash { width: 84px; height: 84px; border-radius: 50%; background: var(--bg); border: 1px solid var(--linha); }

/* Avatar do aluno no card de boas-vindas do dashboard (prévia estática;
   editar é no Camarim). Anel claro para destacar sobre o fundo azul. */
.avatar-boasvindas {
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 3px solid rgba(255, 255, 255, .6);
}

/* "Vida" do avatar (interação em static/js/avatar-vivo.js). A flutuação
   idle fica no wrapper e a inclinação/pulo na imagem: transforms em
   camadas separadas, um não atropela o outro. O bloco global de
   prefers-reduced-motion (fim do arquivo) congela tudo isso. */
.avatar-vivo { display: inline-block; animation: mgdFloat 3.6s ease-in-out infinite; }
.avatar-vivo .avatar-boasvindas {
  cursor: pointer;
  transition: transform .25s ease-out;
}
.avatar-vivo .avatar-boasvindas.avatar-pulo { animation: avatarPulo .45s ease; }
@keyframes avatarPulo {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.12); }
  70%      { transform: scale(.96); }
}

/* ==========================================================================
   Mascote Margaridinha (SVG animado)
   A interação (pupilas seguem o mouse, bounce e pop no clique) fica em
   static/js/margaridinha.js. Aqui só as animações ambiente e utilitárias.
   ========================================================================== */
.mgd { cursor: pointer; display: inline-block; line-height: 0; }
.mgd-float { animation: mgdFloat 3.6s ease-in-out infinite; }
.mgd-daisy { transform-box: fill-box; transform-origin: center; animation: mgdSway 5s ease-in-out infinite; }
.mgd-eyes  { transform-box: fill-box; transform-origin: center; animation: mgdBlink 4.2s infinite; }
.mgd-pupils { transition: transform .12s ease-out; }
.mgd-body.mgd-bounce { animation: mgdBounce .5s ease; }

/* Pop "+N XP" gerado por JS no clique */
.mgd-pop {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, 0);
  background: var(--dourado); color: #fff;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: .9rem;
  padding: .3rem .9rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(227,166,62,.4);
  pointer-events: none; white-space: nowrap;
  animation: mgdPop 1.1s ease-out forwards;
}
.mgd-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.mgd-dica { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: rgba(61,43,30,.45); margin-top: .5rem; }

@keyframes mgdFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mgdSway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes mgdBlink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes mgdBounce { 0% { transform: scale(1); } 30% { transform: scale(1.12,.86); } 60% { transform: scale(.94,1.08); } 100% { transform: scale(1); } }
@keyframes mgdPop {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.6); }
  18%  { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}
@keyframes mgdFloatyA { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }
@keyframes mgdFloatyB { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
.mgl-floaty-a { animation: mgdFloatyA 3.6s ease-in-out infinite; }
.mgl-floaty-b { animation: mgdFloatyB 4.2s ease-in-out infinite; }

/* ==========================================================================
   Formulários de autenticação (allauth) e modal de escolha de entrada
   ========================================================================== */

/* Estiliza os inputs crus do allauth sem depender de widget-tweaks. */
.form-margarida { text-align: left; }
.form-margarida label {
  display: block; font-weight: 700; font-size: .9rem;
  color: var(--titulo); margin-bottom: .3rem;
}
.form-margarida input[type="email"],
.form-margarida input[type="password"],
.form-margarida input[type="text"],
.form-margarida input[type="number"],
.form-margarida input[type="date"],
.form-margarida textarea,
.form-margarida select {
  width: 100%; padding: .65rem .9rem;
  border: 1px solid var(--linha); border-radius: 12px;
  background: var(--surface); color: var(--tinta);
  font-family: 'Nunito Sans', sans-serif; font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-margarida textarea { line-height: 1.5; resize: vertical; }
.form-margarida input:focus,
.form-margarida textarea:focus,
.form-margarida select:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(31, 111, 160, .15);
}
.form-margarida .form-campo { margin-bottom: 1rem; }
.form-margarida .form-campo-inline {
  display: flex; align-items: center; gap: .45rem; margin-bottom: 1rem;
}
.form-margarida .form-campo-inline label { margin-bottom: 0; font-weight: 600; }
.form-margarida .errorlist,
.form-margarida .invalid-feedback,
.form-margarida .text-danger {
  color: var(--coral); list-style: none; padding: 0;
  margin: .35rem 0 0; font-size: .85rem;
}
.form-margarida .helptext,
.form-margarida .form-text {
  display: block; color: var(--muted); font-size: .8rem; margin-top: .3rem;
}

/* ==========================================================================
   Selos de rank das missões (D → S)
   ========================================================================== */

.rank-selo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem;
  border-radius: 9px; flex-shrink: 0;
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: .95rem; line-height: 1; letter-spacing: .02em;
}
.rank-selo-D { background: var(--linha); color: var(--muted-forte); }
.rank-selo-C { background: var(--tint-verde); color: var(--verde-escuro); }
.rank-selo-B { background: var(--tint-azul); color: var(--marca); }
.rank-selo-A { background: var(--tint-roxo); color: var(--roxo); }
/* S é o topo: único com fundo cheio, para destacar sem precisar de mais peso visual. */
.rank-selo-S {
  background: linear-gradient(135deg, var(--dourado), var(--coral));
  color: #fff; box-shadow: 0 2px 8px rgba(209, 79, 53, .28);
}

/* ==========================================================================
   Ranking de alunos (tela /ranking/)
   ========================================================================== */
.rank-linha {
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem .6rem; border-bottom: 1px solid var(--linha);
}
.rank-linha:last-child { border-bottom: 0; }
/* Linha do próprio aluno logado: fundo suave + contorno da marca. */
.rank-linha-eu {
  background: var(--tint-azul);
  border-radius: 12px; border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--marca);
}

/* Posição: círculo neutro; top 3 ganham cores de pódio. */
.rank-pos {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: .95rem;
  background: var(--bg); color: var(--muted-forte);
}
.rank-pos-1 { background: linear-gradient(135deg, #f7c948, var(--dourado)); color: #fff; }
.rank-pos-2 { background: linear-gradient(135deg, #d7dde3, #9aa5b1); color: #fff; }
.rank-pos-3 { background: linear-gradient(135deg, #d9a066, #a86a34); color: #fff; }

.rank-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tint-azul); flex-shrink: 0;
}
.rank-nome { font-family: 'Baloo 2', sans-serif; font-weight: 700; }
/* Evita que nomes longos empurrem o valor para fora no mobile. */
.min-w-0 { min-width: 0; }
.rank-valor { text-align: right; flex-shrink: 0; white-space: nowrap; }
.rank-selo-voce {
  display: inline-block; background: var(--marca); color: #fff;
  font-family: 'Nunito Sans', sans-serif; font-weight: 700;
  font-size: .68rem; padding: .1rem .5rem; border-radius: 999px;
  vertical-align: middle;
}

/* ==========================================================================
   Módulo literário — capas de livro
   ========================================================================== */
/* Miniatura da capa na gestão do catálogo (retângulo de livro). */
.livro-capa-mini {
  width: 44px; height: 60px; border-radius: 6px; flex-shrink: 0;
  object-fit: cover; background: var(--tint-azul); border: 1px solid var(--linha);
}
.livro-capa-icone {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--marca); font-size: 1.4rem;
}
/* Capa maior no catálogo do aluno e no card "lendo agora". */
.livro-capa {
  width: 84px; height: 116px; border-radius: 8px; flex-shrink: 0;
  object-fit: cover; background: var(--tint-azul); border: 1px solid var(--linha);
}
.livro-capa-icone-lg {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--marca); font-size: 2.2rem;
}

/* ==========================================================================
   Conquistas (badges)
   ========================================================================== */
/* Faixa de conquistas recentes no dashboard. */
.mgl-conquistas-faixa {
  background: var(--surface); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: 1rem 1.2rem;
}
.mgl-conquistas-selos { display: flex; flex-wrap: wrap; gap: .5rem; }
.mgl-selo {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--tint-dourado); color: var(--dourado-escuro);
  border-radius: 999px; padding: .3rem .8rem; font-size: 1.1rem;
}
.mgl-selo-nome {
  font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: .82rem;
}

/* Galeria de conquistas (página /conquistas/). */
.conquista-grade {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.conquista-card {
  background: var(--surface); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: 1.4rem 1rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.conquista-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--tint-dourado); font-size: 2.4rem; margin-bottom: .6rem;
}
.conquista-nome {
  font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 1.05rem; margin-bottom: .4rem;
}
.conquista-selo {
  font-size: .8rem; font-weight: 700; color: var(--verde);
}
.conquista-data { font-size: .78rem; color: var(--muted); margin: .15rem 0 0; }
.conquista-criterio { font-size: .82rem; color: var(--muted); margin: 0; }
/* Bloqueada: ícone dessaturado e card esmaecido, ainda mostrando a dica. */
.conquista-card.bloqueada { opacity: .72; }
.conquista-card.bloqueada .conquista-icone {
  background: var(--bg); filter: grayscale(1); opacity: .5;
}

/* Texto da resenha na fila de validação do professor. */
.mgd-resenha {
  background: var(--bg); border: 1px solid var(--linha); border-radius: 12px;
  padding: .8rem 1rem; font-size: .95rem; line-height: 1.55;
}
/* Campo de motivo ao devolver a resenha (mesma pegada do form-margarida). */
.mgd-motivo-input {
  min-width: 12rem; padding: .5rem .8rem;
  border: 1px solid var(--linha); border-radius: 12px;
  background: var(--surface); color: var(--tinta);
  font-family: 'Nunito Sans', sans-serif; font-size: .95rem;
}
.mgd-motivo-input:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(31, 111, 160, .15);
}

/* ==========================================================================
   Camarim (customização do avatar)
   ========================================================================== */

/* Palco do preview ao vivo: herói da página, no lugar da mascote.
   Fundo suave para o avatar (PNG sem fundo) não flutuar. */
.camarim-palco {
  width: 230px; height: 230px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tint-azul);
  border: 4px solid var(--surface);
  box-shadow: var(--sombra-forte);
}
.camarim-palco img { max-width: 100%; height: auto; }

.camarim-grade {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.camarim-opcao {
  display: flex; align-items: center; gap: .55rem;
  flex-wrap: wrap;                 /* o aviso de cadeado desce para a 2ª linha */
  padding: .6rem .8rem;
  border: 1px solid var(--linha); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.camarim-opcao:hover:not(.bloqueada) { border-color: var(--marca); background: var(--tint-azul); }
.camarim-opcao input { accent-color: var(--marca); flex-shrink: 0; }
/* Selecionada: o rádio já indica, a borda reforça. */
.camarim-opcao:has(input:checked) { border-color: var(--marca); background: var(--tint-azul); }
.camarim-opcao:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(31, 111, 160, .15); }

/* Bloqueada: esmaecida e sem cursor de clique. O "disabled" do input é o
   que impede de fato a seleção — e o backend valida de novo. */
.camarim-opcao.bloqueada {
  opacity: .55; cursor: not-allowed; background: var(--bg);
}
.camarim-opcao.bloqueada .camarim-opcao-texto { text-decoration: line-through; }

.camarim-opcao-texto { font-size: .92rem; }
/* Aviso de bloqueio: ocupa a linha inteira, alinhado sob o texto da opção. */
.camarim-cadeado {
  flex-basis: 100%; margin-left: 1.55rem;
  font-size: .72rem; font-weight: 700; color: var(--muted);
}

/* Amostra de cor (tom de pele e cor do cabelo). */
.camarim-amostra {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(61, 43, 30, .18);
}

/* Mini-preview de cada rosto na categoria "Rosto". */
.camarim-rosto-img {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; background: var(--tint-azul);
}

/* Preview de item na vitrine da loja de cosméticos (o aluno usando o item). */
.loja-preview {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--tint-azul);
}

/* Miniatura do prêmio físico: foto (cover) ou, sem foto, ícone de
   presente no mesmo quadrinho — a vitrine nunca fica quebrada. */
.premio-foto {
  width: 56px; height: 56px; border-radius: 14px;
  object-fit: cover; background: var(--tint-azul);
  border: 1px solid var(--linha); flex-shrink: 0;
}
.premio-foto-icone {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tint-azul); color: var(--marca);
  font-size: 1.5rem; flex-shrink: 0;
}
/* Versão menor, para a fila de resgates do painel do professor. */
.premio-foto-sm { width: 48px; height: 48px; border-radius: 12px; font-size: 1.25rem; }

/* Cabeçalho de categoria (accordion): sempre visível, abre no clique. */
.camarim-cabecalho {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 1rem 1.5rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  border-radius: var(--raio-card);
}
.camarim-cabecalho:hover { background: var(--tint-azul); }
.camarim-cabecalho:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(31, 111, 160, .25);
}
.camarim-contador {
  font-family: 'Nunito Sans', sans-serif; font-weight: 600;
  font-size: .82rem; color: var(--muted);
}
.camarim-seta { color: var(--muted); transition: transform .2s ease; }
.camarim-cabecalho[aria-expanded="true"] .camarim-seta { transform: rotate(180deg); }
/* --------------------------------------------------------------------
   Senha: lista de regras e convite para trocar a senha padrão
   -------------------------------------------------------------------- */
/* As 3 regras da senha do aluno, mostradas antes de ele errar. */
.mgl-regras-senha {
  list-style: none; margin: 0; padding: .75rem 1rem;
  background: var(--tint-verde); border-radius: 14px;
  font-size: .86rem; color: var(--muted-forte);
}
.mgl-regras-senha li + li { margin-top: .25rem; }

/* Faixa do dashboard convidando o aluno a trocar a senha que a escola
   gerou. Dourada (chama atenção) e não bloqueante: some sozinha assim que
   o aluno define a própria senha. */
.mgl-aviso-senha {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.15rem; border-radius: var(--raio-card);
  background: var(--tint-dourado); border: 1px solid rgba(227, 166, 62, .35);
}
.mgl-aviso-senha-icone {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; background: var(--dourado); color: #fff;
}
.mgl-aviso-senha-texto { flex: 1 1 260px; min-width: 0; }
.mgl-aviso-senha-titulo {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--titulo);
  line-height: 1.2;
}
.mgl-aviso-senha-sub { font-size: .85rem; color: var(--muted-forte); }

/* Senha em texto claro mostrada uma única vez (reset administrativo). */
.mgl-senha-revelada {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem; letter-spacing: .04em; word-break: break-all;
  padding: .75rem 1rem; border-radius: 12px;
  background: var(--tint-azul); color: var(--marca-escuro);
  border: 1px dashed rgba(31, 111, 160, .35);
}

/* --------------------------------------------------------------------
   Foco em vestibular: contagem regressiva e selo de conteúdo
   -------------------------------------------------------------------- */
/* Card do dashboard com os dias que faltam para a prova. Azul da marca
   (não vermelho): é para motivar quem está estudando, não assustar. */
.mgl-contagem {
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
  padding: 1.15rem 1.35rem; border-radius: var(--raio-card);
  background: linear-gradient(135deg, var(--marca), var(--marca-escuro));
  color: #fff; box-shadow: var(--sombra-forte);
}
.mgl-contagem-numero {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: 2.6rem; line-height: 1; letter-spacing: -.02em;
}
.mgl-contagem-texto { flex: 1 1 220px; min-width: 0; }
.mgl-contagem-titulo {
  font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 1.05rem; line-height: 1.2;
}
.mgl-contagem-sub { font-size: .85rem; color: rgba(255, 255, 255, .82); }
/* No dia da prova o número dá lugar a um ícone. */
.mgl-contagem-hoje { font-size: 2rem; line-height: 1; }

/* Selo "ENEM" nos cards de missão e de livro. Discreto de propósito: é uma
   etiqueta de assunto, não um alerta — não pode competir com o rank nem
   com o título. */
.selo-enem {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--tint-azul); color: var(--marca);
  border: 1px solid rgba(31, 111, 160, .28);
}

/* Filtro "todos / só ENEM" das listas do aluno. */
.mgl-filtro-enem { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.mgl-filtro-enem a {
  padding: .3rem .85rem; border-radius: 999px; font-size: .85rem;
  text-decoration: none; color: var(--muted-forte);
  border: 1px solid var(--linha); background: var(--surface);
}
.mgl-filtro-enem a:hover { border-color: var(--marca); color: var(--marca); }
.mgl-filtro-enem a.ativo {
  background: var(--marca); border-color: var(--marca); color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .camarim-seta { transition: none; }
}

@media (min-width: 992px) {
  .position-lg-sticky { position: sticky; }
}

/* Divisor "ou" entre login local e social */
.mgl-divisor {
  display: flex; align-items: center; gap: .8rem;
  color: var(--muted); font-size: .85rem; margin: 1.25rem 0;
}
.mgl-divisor::before, .mgl-divisor::after {
  content: ""; flex: 1; height: 1px; background: var(--linha);
}

/* Cards clicáveis de escolha de entrada (dentro do modal) */
.mgl-opcao-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .35rem; height: 100%; padding: 1.6rem 1rem 1.4rem;
  border: 1.5px solid var(--linha); border-radius: 18px;
  background: var(--surface); color: var(--titulo);
  text-align: center; text-decoration: none; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mgl-opcao-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--acento, var(--marca)); opacity: 0; transition: opacity .18s ease;
}
.mgl-opcao-card:hover {
  transform: translateY(-4px); text-decoration: none; color: var(--titulo);
  border-color: var(--acento, var(--marca)); box-shadow: var(--sombra-forte);
}
.mgl-opcao-card:hover::before { opacity: 1; }
.mgl-opcao-icone {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0; margin-bottom: .35rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.mgl-opcao-titulo { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.15; color: var(--titulo); }
.mgl-opcao-sub { font-size: .82rem; color: var(--muted); line-height: 1.35; }

/* Modal — cantos arredondados e botão de fechar sobreposto */
.modal-content { position: relative; border: none; border-radius: 24px; box-shadow: 0 24px 60px rgba(61,43,30,.24); }
.mgl-modal-fechar { position: absolute; top: 1rem; right: 1rem; z-index: 3; }

/* Surgimento suave de blocos */
@keyframes mgdSurgir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mgl-anim { animation: mgdSurgir .5s ease-out both; }

/* --------------------------------------------------------------------
   Senha: lista de regras e convite para trocar a senha padrão
   -------------------------------------------------------------------- */
/* As 3 regras da senha do aluno, mostradas antes de ele errar. */
.mgl-regras-senha {
  list-style: none; margin: 0; padding: .75rem 1rem;
  background: var(--tint-verde); border-radius: 14px;
  font-size: .86rem; color: var(--muted-forte);
}
.mgl-regras-senha li + li { margin-top: .25rem; }

/* Faixa do dashboard convidando o aluno a trocar a senha que a escola
   gerou. Dourada (chama atenção) e não bloqueante: some sozinha assim que
   o aluno define a própria senha. */
.mgl-aviso-senha {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.15rem; border-radius: var(--raio-card);
  background: var(--tint-dourado); border: 1px solid rgba(227, 166, 62, .35);
}
.mgl-aviso-senha-icone {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; background: var(--dourado); color: #fff;
}
.mgl-aviso-senha-texto { flex: 1 1 260px; min-width: 0; }
.mgl-aviso-senha-titulo {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--titulo);
  line-height: 1.2;
}
.mgl-aviso-senha-sub { font-size: .85rem; color: var(--muted-forte); }

/* Senha em texto claro mostrada uma única vez (reset administrativo). */
.mgl-senha-revelada {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem; letter-spacing: .04em; word-break: break-all;
  padding: .75rem 1rem; border-radius: 12px;
  background: var(--tint-azul); color: var(--marca-escuro);
  border: 1px dashed rgba(31, 111, 160, .35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}