/* ============================================================
   ORDO · MODULOS.CSS — estilos das telas dos módulos
   Glass, sem cinza, sem corte, tudo cabe na tela.
   ============================================================ */

.mod-sub { font-size: var(--fs-peq); color: var(--c-txt-3); margin-top: -6px; }

/* ---- Abas de texto (Ativas/Concluídas) ---- */
.abas-linha { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--borda); }
.aba-txt { background: none; border: 0; cursor: pointer; padding: var(--sp-2) 0; color: var(--c-txt-3); font-size: var(--fs-peq); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.aba-txt.on { color: var(--c-txt); border-bottom-color: var(--c-ouro); }

/* ---- Dots de progresso ---- */
.dots { display: flex; gap: 4px; flex: 0 0 auto; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--borda); background: var(--c-abs); }
.dot.on { background: var(--c-ouro); border-color: var(--c-ouro); }

/* ---- Linha de hábito ---- */
.hab-linha { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.hab-linha.borda { border-bottom: 1px solid var(--borda); }
.hab-ic { font-size: 20px; width: 28px; text-align: center; flex: 0 0 auto; }
.hab-nome { font-size: 14px; color: var(--c-txt); }
/* check redondo (marcar hábito de hoje) */
.hab-check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); color: var(--c-ouro); font-size: 14px;
  background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  transition: all .18s ease;
}
.hab-check.on { background: rgba(30,52,51,.6); border-color: var(--borda-ouro); }

/* ---- Missões: submissões ---- */
.sub-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.sub-item.borda { border-bottom: 1px solid var(--borda); }
.sub-check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--borda); flex: 0 0 auto; }

/* ---- Detox: gráfico de barras ---- */
.grafico { display: flex; align-items: flex-end; gap: 5px; height: 90px; }
.barra-v { flex: 1; background: var(--c-ouro); border-radius: 3px; opacity: .85; min-height: 4px; }
.eixo { display: flex; justify-content: space-between; margin-top: var(--sp-2); }
.badge-verde { background: var(--c-petroleo); border: 1px solid var(--borda-ouro); border-radius: 12px; padding: 3px 10px; font-size: 11px; color: var(--c-ouro); white-space: nowrap; }
.app-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.app-item.borda { border-bottom: 1px solid var(--borda); }

/* ---- Diário: semana ---- */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: var(--r-sm); }
.dia.ativo { background: var(--c-petroleo); border: 1px solid var(--borda-ouro); }
.dia-letra { font-size: 10px; color: var(--c-txt-3); }
.dia-num { font-size: 14px; color: var(--c-txt-2); }
.dia.ativo .dia-num { color: var(--c-ouro); }

/* ---- Diário: humor ---- */
.mood-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.mood { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mood-e { font-size: 26px; opacity: .45; transition: opacity .15s, transform .15s; }
.mood.on .mood-e { opacity: 1; transform: scale(1.12); }
.mood .peq { font-size: 10px; }
.mood.on .peq { color: var(--c-ouro); }

/* ---- Diário: perguntas ---- */
.perg-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; cursor: pointer; }
.perg-item.borda { border-bottom: 1px solid var(--borda); }
.check { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--borda); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--c-ouro); font-size: 12px; }
.check.on { background: var(--c-petroleo); border-color: var(--c-ouro); }

/* ===================== BLOCO 2 — AUTOCONHECIMENTO ===================== */

/* separador dentro de card */
.sep { height: 1px; background: var(--borda); margin: 2px 0; }

/* Gauge circular (Análise) */
.gauge-wrap { display: flex; justify-content: center; padding: 8px 0; }
.gauge { width: 132px; height: 132px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.gauge::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--c-bg-2); }
.gauge-centro { position: relative; display: flex; flex-direction: column; align-items: center; }
.gauge-num { font-family: var(--serif); font-size: 40px; color: var(--c-txt); font-weight: 600; line-height: 1; }

/* Dimensões */
.dim-item { padding: 10px 0; }
.dim-nome { font-size: 13.5px; color: var(--c-txt-2); }
.dim-valor { font-size: 14px; color: var(--c-ouro); }

/* Árvore SVG */
.arvore-svg { display: flex; justify-content: center; padding: 8px 0; }

/* Ramos da árvore */
.ramo { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 0; }
.ramo.borda { border-bottom: 1px solid var(--borda); }
.ramo-ic { font-size: 18px; color: var(--c-ouro); width: 24px; text-align: center; flex: 0 0 auto; }
.ramo-nome { font-size: 13.5px; color: var(--c-txt-2); width: 118px; flex: 0 0 auto; }
.ramo-valor { font-size: 12.5px; color: var(--c-ouro); width: 40px; text-align: right; flex: 0 0 auto; }

/* Relações */
.rel-item { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 0; }
.rel-item.borda { border-bottom: 1px solid var(--borda); }

/* Crenças */
.crenca-bloco { padding: 10px 0; }

/* ===================== ANIMAÇÕES DOS SVG ===================== */
@media (prefers-reduced-motion: no-preference) {

  /* Radar (traumas): área cresce do centro, pontos surgem */
  .svg-anim polygon[data-dados] {
    transform-box: fill-box; transform-origin: center;
    animation: radar-cresce .9s cubic-bezier(.2,.8,.2,1) both;
  }
  .svg-anim circle[data-ponto] { animation: ponto-surge .5s ease both; }
  @keyframes radar-cresce { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes ponto-surge { from { opacity: 0; } to { opacity: 1; } }

  /* Árvore: nós (folhas) surgem em sequência, galhos aparecem */
  .svg-anim [data-galho] {
    stroke-dasharray: 200; stroke-dashoffset: 200;
    animation: desenha-galho 1.1s ease forwards;
  }
  .svg-anim circle[data-folha] {
    transform-box: fill-box; transform-origin: center;
    animation: folha-surge .5s ease both;
  }
  @keyframes desenha-galho { to { stroke-dashoffset: 0; } }
  @keyframes folha-surge { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  /* Gauge: preenche de 0 até o valor */
  .gauge-anim { animation: gauge-preenche 1s ease both; }
  @keyframes gauge-preenche { from { filter: grayscale(1) brightness(.4); } to { filter: none; } }

  /* Barras de progresso (dimensões, ramos, trilhas, detox apps, jornada,
     player) crescem da esquerda até o valor */
  .rota .barra > i { animation: barra-cresce .9s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes barra-cresce { from { width: 0 !important; } }

  /* Dots de hábitos concluídos — surgem em sequência */
  .rota .dots .dot.on { animation: dot-surge .4s ease both; }
  .rota .dots .dot.on:nth-child(1) { animation-delay: .05s; }
  .rota .dots .dot.on:nth-child(2) { animation-delay: .12s; }
  .rota .dots .dot.on:nth-child(3) { animation-delay: .19s; }
  .rota .dots .dot.on:nth-child(4) { animation-delay: .26s; }
  @keyframes dot-surge { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  /* Gráfico de barras verticais (Detox) — cada barra sobe, escalonada */
  .rota .grafico .barra-v { animation: barra-sobe .7s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
  .rota .grafico .barra-v:nth-child(1){animation-delay:.02s} .rota .grafico .barra-v:nth-child(2){animation-delay:.06s}
  .rota .grafico .barra-v:nth-child(3){animation-delay:.10s} .rota .grafico .barra-v:nth-child(4){animation-delay:.14s}
  .rota .grafico .barra-v:nth-child(5){animation-delay:.18s} .rota .grafico .barra-v:nth-child(6){animation-delay:.22s}
  .rota .grafico .barra-v:nth-child(7){animation-delay:.26s} .rota .grafico .barra-v:nth-child(8){animation-delay:.30s}
  .rota .grafico .barra-v:nth-child(9){animation-delay:.34s} .rota .grafico .barra-v:nth-child(10){animation-delay:.38s}
  .rota .grafico .barra-v:nth-child(11){animation-delay:.42s} .rota .grafico .barra-v:nth-child(12){animation-delay:.46s}
  @keyframes barra-sobe { from { transform: scaleY(0); opacity: .3; } to { transform: scaleY(1); opacity: .85; } }

  /* Timeline de fases (Jornada / Arquivo): dot e linha das etapas
     concluídas/ativas surgem, a linha "cresce" de cima p/ baixo */
  .rota .timeline__item .timeline__dot { animation: dot-pulsa .5s ease both; }
  .rota .timeline__item:nth-child(1) .timeline__dot { animation-delay: .05s; }
  .rota .timeline__item:nth-child(2) .timeline__dot { animation-delay: .18s; }
  .rota .timeline__item:nth-child(3) .timeline__dot { animation-delay: .31s; }
  .rota .timeline__item:nth-child(4) .timeline__dot { animation-delay: .44s; }
  .rota .timeline__item:nth-child(5) .timeline__dot { animation-delay: .57s; }
  .rota .timeline__linha { transform-origin: top; animation: linha-cresce .5s ease both; }
  @keyframes dot-pulsa { from { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.12); } to { transform: scale(1); opacity: 1; } }
  @keyframes linha-cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* Trilha de dias (Missões — pontos preenchidos do desafio) */
  .rota .dia-dot.on { animation: dot-surge .4s ease both; }
}

/* ===================== BLOCO 3 — CONHECIMENTO ===================== */
.trilha-ic {
  width: 48px; height: 48px; border-radius: var(--r-md); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--c-premium); border: 1px solid var(--borda);
}
.mentor-medalhao {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px; color: var(--c-ouro);
  background: radial-gradient(circle at 40% 35%, rgba(200,163,106,.22), transparent 60%);
  border: 1px solid var(--borda-ouro);
}

/* ===================== BLOCO 4 — ALMA & MEMÓRIA ===================== */
.silencio-painel { min-height: 180px; align-items: center; justify-content: center; text-align: center; }
.silencio-praticas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.silencio-prat { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.silencio-ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--c-ouro); background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border: 1px solid var(--borda); }
.proposito-hero { min-height: 120px; align-items: center; justify-content: center; text-align: center; }
.carta-ic { width: 44px; height: 44px; border-radius: var(--r-md); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--c-premium); border: 1px solid var(--borda); }
.mem-item { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 0; }
.mem-item.borda { border-bottom: 1px solid var(--borda); }
.mem-ic { width: 26px; text-align: center; font-size: 18px; color: var(--c-ouro); flex: 0 0 auto; }

/* ===================== BLOCO 5 — MÚSICA / PLAYER ===================== */
.player { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--borda-ouro); background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
.player-capa { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.player-info { padding: var(--sp-5); }
.player-ctrl { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-4); }
.ctrl { font-size: 18px; color: var(--c-txt-2); cursor: pointer; }
.play-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--c-ouro); display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; flex: 0 0 auto; }
.play-ic { font-size: 18px; color: var(--c-abs); }
.pl-ic { width: 44px; height: 44px; border-radius: var(--r-sm); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--c-premium); border: 1px solid var(--borda); }

/* ===================== ÁREA DO GUARDIÃO (ADMIN) ===================== */
/* Métricas — grade tátil (não empilhada) */
.metricas-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.metrica { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-4) var(--sp-2); text-align: center; }
.metrica-ic { font-size: 22px; }
.metrica-num { font-family: var(--serif); font-size: 30px; color: var(--c-ouro); line-height: 1; }

/* Usuários */
.usuario-linha { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.usuario-linha.borda { border-bottom: 1px solid var(--borda); }
.usuario-nome { font-size: 14px; color: var(--c-txt); }
.trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.papel-selo {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  font-size: 11px; padding: 5px 10px; border-radius: var(--r-full);
  border: 1px solid var(--borda); color: var(--c-txt-3);
  background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
.papel-selo.admin { color: var(--c-ouro); border-color: var(--borda-ouro); background: rgba(30,52,51,.5); }
.papel-selo.eu { opacity: .6; cursor: default; }

/* Biblioteca admin */
.artigo-linha { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.artigo-linha.borda { border-bottom: 1px solid var(--borda); }
.artigo-titulo { font-size: 14px; color: var(--c-txt); }
.btn-excluir {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--borda); background: var(--glass-1);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); font-size: 15px;
}