/*
 * Maná Kids — Acabamento dedicado das telas internas (paginas.css)
 *
 * Camada de polimento (carregada por último): refina Quiz, Escola Dominical,
 * Planos, Perfil e Dashboard com a identidade lavanda e a "pegada viciante"
 * (efeito 3D de toque, cores, brilhos). Só estética — não muda estrutura/JS.
 * Mobile-first; respeita prefers-reduced-motion no bloco final.
 */

/* ============== Quiz: opções como cartões de escolha ============== */
#quiz-opcoes .btn {
  justify-content: flex-start;
  text-align: left;
  min-height: 58px;
  padding: 0.9rem 1.2rem;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--cor-texto);
  background: #fff;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px rgba(120, 110, 200, 0.22), 0 5px 0 rgba(120, 110, 200, 0.14);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
#quiz-opcoes .btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px var(--cor-primaria), 0 7px 0 rgba(120, 110, 200, 0.18);
}
#quiz-opcoes .btn:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px var(--cor-primaria), 0 2px 0 rgba(120, 110, 200, 0.18);
}
#quiz-opcoes .btn.btn-verde {
  box-shadow: 0 5px 0 rgba(70, 198, 138, 0.45);
}
#quiz-pergunta { text-align: center; }
#quiz .card { border-radius: var(--raio-grande); }
#quiz-feedback {
  background: #f7f3ff; border-radius: 14px; padding: 0.8rem 1rem;
  color: var(--cor-texto);
}

/* ============== Escola Dominical: selos de semana ============== */
#ed-cal { gap: 0.6rem !important; }
#ed-cal .conquista-card {
  border-radius: 18px;
  padding: 0.6rem 0.3rem;
  background: #fff;
  border: 2px solid rgba(120, 110, 200, 0.14);
  box-shadow: 0 4px 0 rgba(120, 110, 200, 0.10);
  transition: transform 110ms ease, box-shadow 110ms ease;
}
#ed-cal .conquista-card:not(.locked):hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(120, 110, 200, 0.16);
}
#ed-cal .conquista-card:not(.locked):active { transform: translateY(2px); }
#ed-cal .conquista-card.locked { background: #efecf6; }
/* Semana atual recebe brilho dourado (substitui o outline inline) */
#ed-cal .conquista-card[style*="outline"] {
  outline: 3px solid var(--cor-secundaria) !important;
  box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.18);
}

/* ============== Planos ============== */
.plano { border-radius: var(--raio-grande); }
.plano.destaque {
  outline: none;
  border: 2px solid var(--brand-lavanda);
  background: linear-gradient(180deg, #faf6ff 0%, #fff 40%);
  box-shadow: var(--sombra-flutuante);
  overflow: hidden;
}
/* Selo "Mais popular" como fita */
.plano .selo {
  position: absolute; top: 0.9rem; right: -2.4rem;
  transform: rotate(45deg);
  background: var(--cor-secundaria); color: #4a2e00;
  font-weight: 800; font-size: 0.72rem;
  padding: 0.3rem 2.6rem;
  box-shadow: var(--sombra-card);
}
.plano .preco { color: var(--cor-primaria); }

/* ============== Perfil ============== */
.avatar-atual {
  outline: 5px solid var(--brand-lavanda);
  outline-offset: 0;
  background: radial-gradient(circle at 50% 30%, #f3edfb, #fff);
  box-shadow: var(--sombra-flutuante);
}
.avatares-grid .avatar-item {
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(120, 110, 200, 0.10);
  transition: transform 110ms ease, box-shadow 110ms ease;
}
.avatares-grid .avatar-item:active { transform: translateY(2px); }
.avatar-item.selecionado {
  box-shadow: 0 0 0 3px var(--brand-lavanda), 0 4px 0 rgba(120, 110, 200, 0.14);
}

/* ============== Dashboard: atalhos coloridos com toque 3D ============== */
.atalho {
  border-radius: var(--raio-grande);
  box-shadow: 0 6px 0 rgba(120, 110, 200, 0.12);
  transition: transform 110ms ease, box-shadow 110ms ease;
}
.atalho:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(120, 110, 200, 0.12); }
/* Acento de cor por atalho (ordem da grade) para parecer um “mapa de ilhas” */
.atalhos-grid .atalho:nth-child(6n+1) { background: linear-gradient(180deg, #fff, #f3edff); }
.atalhos-grid .atalho:nth-child(6n+2) { background: linear-gradient(180deg, #fff, #e9f7ef); }
.atalhos-grid .atalho:nth-child(6n+3) { background: linear-gradient(180deg, #fff, #fff3e0); }
.atalhos-grid .atalho:nth-child(6n+4) { background: linear-gradient(180deg, #fff, #eef2ff); }
.atalhos-grid .atalho:nth-child(6n+5) { background: linear-gradient(180deg, #fff, #fdeef6); }
.atalhos-grid .atalho:nth-child(6n+6) { background: linear-gradient(180deg, #fff, #eafaf6); }

/* HUD: chips com leve relevo */
.hud-item {
  box-shadow: var(--sombra-card);
  border-radius: 999px;
}

/* Streak card mais quente */
.streak-card { box-shadow: var(--sombra-card); }

/* ============== Seletor de troca entre perfis ============== */
#perf-trocar { margin-bottom: 1.3rem; }
#perf-trocar .perf-trocar-tit {
  text-align: center; font-family: var(--fonte-titulo); font-weight: 800;
  color: var(--cor-texto-suave); font-size: 0.85rem; margin-bottom: 0.5rem;
}
#perf-trocar .perf-chips { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
#perf-trocar .perf-chip {
  position: relative;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  border: 2px solid var(--cor-borda); border-radius: 999px;
  background: #fff; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 800; color: var(--cor-texto);
  transition: transform 100ms ease, border-color 100ms ease;
}
#perf-trocar .perf-chip:active { transform: translateY(2px); }
#perf-trocar .perf-chip .cara {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: #f3edfb; border-radius: 50%; font-size: 1.2rem;
}
#perf-trocar .perf-chip.ativo {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(108, 63, 200, 0.16);
}
#perf-trocar .perf-chip .atual-tag {
  font-size: 0.62rem; font-weight: 800; color: #fff;
  background: var(--cor-primaria); border-radius: 999px; padding: 0.1rem 0.45rem;
}

/* ============== Criar perfil de criança (modal) ============== */
.criar-perfil-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center;
  background: rgba(45, 27, 105, 0.55);
  backdrop-filter: blur(3px);
  padding: 1.2rem;
  animation: cp-fade 0.25s ease;
}
.criar-perfil-modal .cp-card {
  width: min(440px, 94vw);
  max-height: 92vh; overflow-y: auto;
  background: #fff;
  border-radius: var(--raio-grande);
  padding: 1.6rem 1.4rem 1.8rem;
  text-align: center;
  box-shadow: var(--sombra-flutuante);
  animation: cp-pop 0.35s cubic-bezier(.2,.9,.3,1.3);
}
.cp-card .cp-emoji { font-size: 3.2rem; line-height: 1; }
.cp-card h2 { margin: 0.3rem 0 0.2rem; }
.cp-card .cp-sub { color: var(--cor-texto-suave); margin-bottom: 1.1rem; }
.cp-label {
  display: grid; gap: 0.35rem; text-align: left;
  font-family: var(--fonte-titulo); font-weight: 800; color: var(--cor-texto);
  margin-bottom: 1rem;
}
.cp-label input, .cp-label select {
  min-height: 50px; padding: 0 0.9rem;
  border: 2px solid var(--cor-borda); border-radius: 14px;
  font-family: var(--fonte-corpo); font-size: 1rem; font-weight: 600;
  background: #fff; color: var(--cor-texto);
}
.cp-label input:focus, .cp-label select:focus { outline: none; border-color: var(--cor-primaria); }
.cp-avatares { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cp-av {
  flex: 1 1 0; min-width: 84px;
  display: grid; gap: 0.2rem; place-items: center;
  padding: 0.7rem 0.4rem;
  border: 2px solid var(--cor-borda); border-radius: 16px;
  background: #fff; cursor: pointer;
  transition: transform 100ms ease, border-color 100ms ease;
}
.cp-av:active { transform: translateY(2px); }
.cp-av .cp-face { font-size: 2rem; line-height: 1; }
.cp-av small { font-size: 0.74rem; font-weight: 800; color: var(--cor-texto-suave); }
.cp-av.sel { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(108, 63, 200, 0.16); }
.cp-erro { color: var(--cor-erro); font-weight: 700; margin: 0.2rem 0 0.8rem; }

@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  #quiz-opcoes .btn, #ed-cal .conquista-card, .atalho, .avatares-grid .avatar-item {
    transition: none !important;
  }
  .criar-perfil-modal, .criar-perfil-modal .cp-card { animation: none; }
}