/*
 * Maná Kids — Identidade visual (brand.css)
 *
 * Calibrado pela arte oficial (logo-mana-kids.png): paleta lavanda/periwinkle
 * suave, cards brancos arredondados, sombras macias e CTAs verdes.
 * Carregado por ÚLTIMO no index.html para refinar os componentes existentes
 * sem reescrevê-los. Mobile-first; respeita prefers-reduced-motion.
 */

:root {
  /* Lavanda/periwinkle extraídos da arte */
  --brand-lavanda: #8FA4EC;   /* periwinkle */
  --brand-roxo: #A192D7;      /* lavanda-roxo */
  --brand-nuvem: #EEF0FB;     /* fundo claro arejado */
  --brand-creme: #FFF8F0;     /* creme dos cards/conteúdo */
  --cor-acento: #46C68A;      /* verde "Ler Agora" mais vivo */

  /* Sombras mais macias e coloridas (lavanda) */
  --sombra-card: 0 10px 28px rgba(120, 110, 200, 0.12);
  --sombra-flutuante: 0 18px 44px rgba(120, 110, 200, 0.22);
  --raio: 20px;
  --raio-grande: 30px;
}

/* Fundo: aura lavanda suave no topo que dissolve no creme (como a arte) */
body {
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(143, 164, 236, 0.28), transparent 60%),
    radial-gradient(900px 460px at 90% 4%, rgba(161, 146, 215, 0.20), transparent 55%),
    var(--brand-creme);
  background-attachment: fixed;
}

/* Navbar translúcida combinando com o fundo lavanda */
.navbar {
  background: rgba(248, 246, 255, 0.85);
  border-bottom: 1px solid rgba(120, 110, 200, 0.12);
}
/* Logo oficial (imagem) na navbar */
.navbar .logo {
  padding: 0;
  background: none;
  box-shadow: none;
  line-height: 0;
}
.navbar .logo img,
.navbar .logo picture {
  display: block;
  height: clamp(30px, 7vw, 38px);
  width: auto;
  border-radius: 10px;
  box-shadow: var(--sombra-card);
}
/* Navbar fina: botões de auth compactos (não engrossam a barra) */
.navbar nav { flex-wrap: nowrap; }
.navbar nav .btn {
  min-height: 38px;
  padding: 0.4rem 1rem;
  font-size: 0.92rem;
  white-space: nowrap;
}
/* Seletor de idioma DISCRETO: chip pequeno à direita (nunca embaixo do logo).
   Mostra só bandeira + código curto. */
.navbar .lang-select {
  flex: 0 0 auto;
  min-height: 34px; height: 34px;
  border-width: 1px;
  border-radius: 12px;
  padding: 0 0.45rem;
  font-size: 0.85rem; font-weight: 800;
  background: rgba(255, 255, 255, 0.7);
  color: var(--cor-texto-suave);
  appearance: none; -webkit-appearance: none;
  text-align: center;
}
.navbar .lang-select:hover { background: #fff; }

/* ---------------- Hero com a arte oficial ---------------- */
.hero {
  background:
    radial-gradient(900px 360px at 50% -20%, rgba(143, 164, 236, 0.30), transparent 70%);
}
.hero .emoji-hero { font-size: clamp(3rem, 10vw, 5rem); }

/* Vitrine: a arte de marketing (dois celulares) na landing */
.hero-showcase {
  width: 100%;
  max-width: 940px;
  margin: 0.6rem auto 0;
}
.hero-showcase img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-flutuante);
  background: var(--brand-nuvem);
}

/* ---------------- Cards mais fofos ---------------- */
.card {
  border: 1px solid rgba(120, 110, 200, 0.10);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-flutuante); }
.card-emoji { filter: drop-shadow(0 6px 8px rgba(120, 110, 200, 0.18)); }

/* CTA verde (estilo "Ler Agora" da arte) bem destacado */
.btn-verde {
  background: linear-gradient(180deg, #54d699, var(--cor-acento));
  color: #06351f;
  box-shadow: 0 8px 18px rgba(70, 198, 138, 0.35);
}

/* Botão primário com leve relevo (mais "fofo") */
.btn:not(.btn-contorno):not(.btn-dourado):not(.btn-verde) {
  background: linear-gradient(180deg, #7a52d8, var(--cor-primaria));
}

/* Selo "Mais popular" e destaques herdam o roxo da marca */
.plano.destaque { border: 2px solid var(--brand-lavanda); }

/* ---------------- Navbar quando logado ---------------- */
/* Logado: esconde os CTAs de auth (Entrar/Começar) — a navegação vira a tab bar. */
body.logado .navbar nav .btn { display: none; }
/* Telas estreitas (deslogado): tudo numa linha só, fino e compacto. */
@media (max-width: 520px) {
  .navbar { padding: 0.3rem 0.7rem; gap: 0.4rem; }
  .navbar nav { gap: 0.3rem; }
  .navbar nav .btn { padding: 0.4rem 0.7rem; font-size: 0.82rem; min-height: 34px; }
  .navbar .lang-select { padding: 0 0.3rem; font-size: 0.8rem; min-height: 32px; height: 32px; }
}
/* Muito estreito: o logo pode encolher um pouco para tudo caber na linha. */
@media (max-width: 360px) {
  .navbar .logo img, .navbar .logo picture { height: 28px; }
  .navbar nav .btn { padding: 0.35rem 0.55rem; font-size: 0.78rem; }
}

/* ---------------- Barra de navegação inferior (tab bar) ---------------- */
.tabbar { display: none; }
body.logado .tabbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  justify-content: space-around;
  align-items: stretch;
  gap: 0.2rem;
  padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(120, 110, 200, 0.14);
  box-shadow: 0 -6px 20px rgba(120, 110, 200, 0.10);
}
.tabbar a {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 0.35rem 0.2rem;
  border-radius: 14px;
  text-decoration: none;
  color: var(--cor-texto-suave);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 0.66rem;
}
.tabbar a:hover { text-decoration: none; }
.tabbar a .ic { font-size: 1.5rem; line-height: 1; filter: grayscale(0.35); transition: transform 140ms ease; }
.tabbar a.ativo { color: var(--cor-primaria); background: #f1ebff; }
.tabbar a.ativo .ic { filter: none; transform: translateY(-2px) scale(1.12); }

/* Espaço para o conteúdo não ficar atrás da tab bar */
body.logado { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* Desktop: a tab bar vira uma "pílula" flutuante centralizada (não estica feio) */
@media (min-width: 821px) {
  body.logado .tabbar {
    left: 50%; right: auto;
    transform: translateX(-50%);
    bottom: 14px;
    width: min(540px, 92%);
    border: 1px solid rgba(120, 110, 200, 0.14);
    border-radius: 22px;
  }
}

/* ---------------- Oferta de instalação (banner slim, discreto) ---------------- */
/* :not([hidden]) é essencial — senão display:flex sobrepõe o atributo hidden. */
#pwa-install:not([hidden]) {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom, 0px)); /* acima da tab bar */
  z-index: 70;
  width: min(420px, 92%);
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.7rem 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(120, 110, 200, 0.16);
  border-radius: 999px;
  box-shadow: var(--sombra-flutuante);
  animation: pwa-sobe 0.35s ease both;
}
#pwa-install .pwa-ic { font-size: 1.3rem; line-height: 1; }
#pwa-install .pwa-txt {
  flex: 1; min-width: 0;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 0.82rem;
  color: var(--cor-texto); line-height: 1.15;
}
#pwa-install .btn { padding: 0.45rem 1rem; min-height: 38px; font-size: 0.9rem; }
#pwa-install .pwa-x {
  border: 0; background: transparent; cursor: pointer;
  color: var(--cor-texto-suave); font-size: 1rem; line-height: 1; padding: 0.35rem;
}
@keyframes pwa-sobe { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
  .card:hover { transform: none; }
  .tabbar a .ic { transition: none; }
  #pwa-install { animation: none; }
}

/* ---------------- Modo foco (quiz/lição em página dedicada) ---------------- */
/* Ao iniciar um quiz ou abrir uma lição, escondemos toda a navegação para a
   criança ver SOMENTE o conteúdo (sem distrações). O router limpa a classe ao
   trocar de rota. */
body.modo-foco .navbar,
body.modo-foco .tabbar,
body.modo-foco .footer,
body.modo-foco #pwa-install { display: none !important; }
body.modo-foco { padding-bottom: 0 !important; }
body.modo-foco #app { min-height: 100vh; }
/* Barra superior do modo foco: botão sair, fixa no topo */
.foco-topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.2rem 0.8rem;
  background: var(--cor-fundo);
}
.foco-topo .foco-sair {
  border: 2px solid var(--cor-borda); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 0.45rem 1rem; min-height: 42px;
  font-family: var(--fonte-titulo); font-weight: 800; color: var(--cor-texto);
}
.foco-topo .foco-tit {
  font-family: var(--fonte-titulo); font-weight: 800; color: var(--cor-primaria);
  font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}