/* ==========================================================================
   alegre.css — a camada de alegria.

   Carregado DEPOIS do style.css, e só mexe em três coisas: forma, cor e
   resposta ao toque. Nenhuma regra de layout é reescrita aqui, então o painel
   inteiro continua funcionando se este arquivo for removido.

   O que faz uma interface parecer infantil não é hue: é o CANTO GORDO, o
   BOTÃO QUE AFUNDA quando se aperta, a COR CHAPADA e SATURADA, e a
   TIPOGRAFIA GRANDE E PESADA. Duolingo e ClassDojo fazem exatamente isso —
   e nenhum dos dois é colorido a esmo.

   Uma ressalva registrada de propósito: o relatório de Frequência & Carga
   horária é o único documento do produto que pode ser exigido por alguém de
   fora da casa. Ele fica de fora desta camada, no fim do arquivo.
   ========================================================================== */

:root {
  /* Cantos mais gordos em toda a plataforma. */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;

  /* Sombras um pouco mais presentes: o card precisa parecer que dá para pegar. */
  --shadow-sm: 0 3px 12px rgba(31, 42, 36, 0.07);
  --shadow-md: 0 8px 24px rgba(31, 42, 36, 0.10);

  /* Curva com um respingo de mola. É o que dá vida ao hover e ao toque. */
  --transition: 0.2s cubic-bezier(.34, 1.4, .64, 1);

  /* Paleta viva — usada pelas disciplinas, medalhas e blocos da aula.
     Nove matizes bem separados, para nenhuma disciplina se confundir
     com a vizinha nem para quem enxerga cor de forma diferente. */
  --joy-coral:    #F0554B;
  --joy-uva:      #7C4DFF;
  --joy-ceu:      #2D7FF9;
  --joy-limao:    #F5B921;
  --joy-agua:     #00B3A4;
  --joy-folha:    #4CB944;
  --joy-rosa:     #E8438F;
  --joy-laranja:  #FF6B2C;
  --joy-madeira:  #A1785C;

  /* Altura do "degrau" dos botões apertáveis. */
  --degrau: 4px;
}

/* ── Botões apertáveis ───────────────────────────────────────────────────── */

/* A borda inferior é o degrau; ao apertar, o botão desce até o degrau sumir.
   É o gesto do Duolingo, e é o detalhe que faz a interface parecer viva. */
.btn {
  border-radius: var(--radius-full);
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .08s ease, background var(--transition), box-shadow var(--transition);
}
.btn-primary  { box-shadow: 0 var(--degrau) 0 var(--primary-dark); }
.btn-accent   { box-shadow: 0 var(--degrau) 0 #C9861F; }
.btn-danger   { box-shadow: 0 var(--degrau) 0 #A93E3E; }
.btn-outline  { box-shadow: 0 var(--degrau) 0 var(--border); }

.btn-primary:active:not(:disabled),
.btn-accent:active:not(:disabled),
.btn-danger:active:not(:disabled),
.btn-outline:active:not(:disabled) {
  transform: translateY(var(--degrau));
  box-shadow: 0 0 0 currentColor;
}
.btn-ghost:active:not(:disabled) { transform: scale(.96); }

.btn-lg { padding: .9rem 1.7rem; font-size: 1rem; }

/* ── Fundo com respiro ───────────────────────────────────────────────────── */

/* Duas manchas de cor bem diluídas, fixas atrás do conteúdo. O fundo chapado
   fazia o painel inteiro parecer folha de ofício; isto dá profundidade sem
   custar contraste de texto nenhum. */
body {
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(124, 77, 255, .07), transparent 62%),
    radial-gradient(900px 560px at 96% 4%,    rgba(245, 185, 33, .10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Menu lateral com cor por módulo ─────────────────────────────────────── */

.nav-ico {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--nc, var(--primary)) 13%, #fff);
  color: var(--nc, var(--primary));
  transition: transform var(--transition);
}
.nav-item { gap: .6rem; }
.nav-item:hover .nav-ico { transform: scale(1.12) rotate(-6deg); }
.nav-item.active .nav-ico {
  background: var(--nc, var(--primary)); color: #fff;
}
.nav-item.active {
  background: color-mix(in srgb, var(--nc, var(--primary)) 11%, #fff);
  color: var(--text);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nc, var(--primary)) 32%, #fff);
}

.nav-section {
  color: var(--text-light); font-weight: 900;
  letter-spacing: .12em;
}

/* No celular a barra de baixo acompanha a mesma cor. */
.bottom-nav button.on { color: var(--nc, var(--primary)); }

/* ── Métricas: a bolha de cor faz o trabalho ─────────────────────────────── */

.metric {
  border: 2px solid color-mix(in srgb, var(--mc, var(--primary)) 18%, var(--border));
  transition: transform var(--transition), box-shadow var(--transition);
}
.metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.metric-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: color-mix(in srgb, var(--mc, var(--primary)) 15%, #fff) !important;
  color: var(--mc, var(--primary)) !important;
  display: grid; place-items: center;
}
/* O número fica na cor do texto de propósito. Colorir a bolha do ícone alegra;
   colorir o número de 1.6rem faz "15 registros" parecer aviso de erro. */
.metric-label { font-weight: 800; }

/* ── Tela vazia: o Broto no lugar do ícone cinza ─────────────────────────── */

.empty > svg:not(.mascote) { display: none; }
.empty-broto { display: grid; place-items: center; margin-bottom: .3rem; }
.empty h3 { font-weight: 900; letter-spacing: -0.02em; }

/* ── Entrada ─────────────────────────────────────────────────────────────── */

.login-logo-broto {
  background: transparent !important; color: inherit;
  width: auto !important; height: auto !important;
  display: grid; place-items: center; box-shadow: none !important;
}
.login-title { font-weight: 900; letter-spacing: -0.03em; }

/* ── Saudação ────────────────────────────────────────────────────────────── */

.ola { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ola-broto { flex-shrink: 0; }
.ola h1 { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; }
.ola p { font-size: .87rem; color: var(--text-muted); margin-top: .15rem; }

/* ── Cartões e fichas ────────────────────────────────────────────────────── */

.card {
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition);
}
.card-header h2 { font-size: 1rem; }

/* Etiquetas de área e sequência com mais presença. */
.area-tag { font-weight: 800; }
.streak-badge { font-weight: 900; }

.chip {
  border-radius: var(--radius-full);
  font-weight: 800;
  border-width: 2px;
}
.chip:active { transform: scale(.95); }

.badge { font-weight: 900; letter-spacing: .02em; }

/* O raio e a bolha redonda da métrica ficam na seção "Métricas", acima —
   repetir .metric-icon aqui sobrescrevia o círculo por um quadrado. */
.metric { border-radius: var(--radius-lg); }
.metric-value { font-weight: 900; }

.nav-item { border-radius: var(--radius-full); font-weight: 700; }
.nav-item.active { box-shadow: inset 0 0 0 2px var(--primary); }

.input, .textarea, .select { border-radius: var(--radius); border-width: 2px; }
.input:focus, .textarea:focus, .select:focus { border-width: 2px; }

.modal { border-radius: var(--radius-lg); }
.avatar, .family-badge { border-radius: var(--radius); }

/* ── Títulos com mais peso ───────────────────────────────────────────────── */

.page-header h1 { font-weight: 900; letter-spacing: -0.03em; }
.card-header h2 { font-weight: 900; }

/* ── O mascote ───────────────────────────────────────────────────────────── */

.mascote { display: block; overflow: visible; }

/* Respira devagar, como bicho parado. Movimento pequeno o bastante para não
   competir com a leitura — e desligado para quem pede menos animação. */
.mascote-vivo { animation: broto-respira 3.4s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes broto-respira {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.045) rotate(-1.6deg); }
}

.mascote-brilho { animation: broto-brilha 1.6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes broto-brilha {
  0%, 100% { opacity: .35; transform: scale(.86); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.mascote-pula { animation: broto-pula .62s cubic-bezier(.3, 1.6, .5, 1) 2; transform-origin: 50% 92%; }
@keyframes broto-pula {
  0%, 100% { transform: translateY(0) scaleY(1); }
  28%      { transform: translateY(-14%) scaleY(1.06); }
  60%      { transform: translateY(0) scaleY(.94); }
}

/* ── Fala do mascote ─────────────────────────────────────────────────────── */

.broto-fala {
  display: flex; align-items: center; gap: .9rem;
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: .85rem 1.1rem;
}
.broto-fala .mascote { flex-shrink: 0; }
.broto-fala-txt { font-size: .92rem; line-height: 1.6; font-weight: 700; }
.broto-fala-txt strong { color: var(--primary-dark); }

/* ── Comemoração ─────────────────────────────────────────────────────────── */

.festa {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: rgba(31, 42, 36, .58); backdrop-filter: blur(3px);
  animation: festa-entra .22s ease;
}
@keyframes festa-entra { from { opacity: 0; } to { opacity: 1; } }

.festa-card {
  background: var(--bg-card); border-radius: var(--radius-lg);
  padding: 2rem 2.2rem 1.7rem; text-align: center; max-width: 380px; width: calc(100% - 2.5rem);
  box-shadow: var(--shadow-lg); animation: festa-sobe .42s cubic-bezier(.2, 1.5, .5, 1);
}
@keyframes festa-sobe {
  from { transform: translateY(28px) scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.festa-card .mascote { margin: 0 auto .6rem; }
.festa-card h3 { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; }
.festa-card p { font-size: .92rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.6; }
.festa-estrelas { display: flex; justify-content: center; gap: .3rem; margin: .9rem 0 .2rem; }
.festa-estrelas svg { color: var(--joy-limao); animation: estrela-pop .45s backwards cubic-bezier(.2,1.7,.5,1); }
.festa-estrelas svg:nth-child(1) { animation-delay: .12s; }
.festa-estrelas svg:nth-child(2) { animation-delay: .24s; }
.festa-estrelas svg:nth-child(3) { animation-delay: .36s; }
@keyframes estrela-pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }

/* Confete: 14 tiras caindo, montadas em CSS puro. Zero imagem, zero peso. */
.confete { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confete i {
  position: absolute; top: -14px; width: 9px; height: 15px; border-radius: 2px;
  animation: confete-cai 2.5s linear forwards;
}
@keyframes confete-cai {
  to { transform: translateY(105vh) rotate(760deg); opacity: .15; }
}

/* ── Acessibilidade: quem pede menos movimento, recebe menos ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .mascote-vivo, .mascote-brilho, .mascote-pula,
  .festa, .festa-card, .festa-estrelas svg, .confete i {
    animation: none !important;
  }
  .btn:active { transform: none; }
}

/* ── O que NÃO entra na festa ────────────────────────────────────────────── */

/* Frequência & Carga horária é o único documento do produto que pode ser
   exigido por um conselho tutelar ou uma secretaria de educação. Ele fica
   sóbrio: canto discreto, sem degrau no botão, sem mascote. Um relatório
   com cara de joguinho é um relatório que a família não consegue defender. */
[data-page-atual="relatorios"] .card,
[data-page-atual="relatorios"] .metric { border-radius: var(--radius-sm); }
[data-page-atual="relatorios"] .btn { box-shadow: none; border-radius: var(--radius-sm); }
[data-page-atual="relatorios"] .btn:active { transform: none; }

/* Impressão nunca leva a festa junto. */
@media print {
  .festa, .confete, .mascote { display: none !important; }
}