/* Forsolun · visual v2 (16/10/2026) — Etapa 1: só aparência, sem mudar dados.
   Carregado por último. Usa as variáveis de cor de cada canal (--bg, --fg, --card, --capa, --line, --sub, --tit, --texto, --pri, --pri-fg, --acc). */

/* ---------- Barra lateral (computador) ---------- */
@media (min-width:1200px){
  body.com-coluna{padding-left:264px}
  .col-usu:not([hidden]){width:264px;padding:18px 16px 28px;background:var(--capa);border-right:1px solid var(--line);scrollbar-width:thin}
  #menu-toggle{display:none!important}
  #email-toggle{display:none!important}
}
.col-usu .col-marca{padding:4px 10px 18px;margin:0}
.col-usu .col-marca img{height:30px}
.col-usu .rotulo{display:flex;align-items:center;gap:6px;margin:18px 12px 6px;font-size:11px;letter-spacing:.14em;color:var(--sub)}
.col-usu .rotulo svg{width:13px;height:13px}
.col-usu a,.col-usu .col-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;margin:1px 0;border:0;border-radius:11px;background:none;font:inherit;font-size:14.5px;font-weight:400;color:var(--texto);text-align:left;text-decoration:none;cursor:pointer;transition:background .15s}
.col-usu a svg,.col-usu .col-item svg{width:20px;height:20px;flex:none;color:var(--sub)}
.col-usu a:hover,.col-usu .col-item:hover{background:color-mix(in srgb,var(--card) 70%,transparent)}
.col-usu a[aria-current="page"]{background:var(--card);color:var(--tit);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px -6px rgba(0,0,0,.12)}
.col-usu a[aria-current="page"] svg{color:var(--pri)}
.col-usu a[aria-current="page"] .foto-ini{background:var(--pri);color:var(--pri-fg)}
.col-usu .foto-ini{width:26px;height:26px;font-size:11px;flex:none}
.col-usu .col-canal{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.col-usu .col-canal-nome{display:flex;align-items:center;gap:10px;padding:8px 12px 10px;margin:0;color:var(--tit)}
.col-usu .col-canal-nome strong{font-weight:500;font-size:14.5px}
.col-usu .col-canal-nome .foto-ini{width:30px;height:30px}
.col-usu .col-canal-nome:hover{background:none}
.col-usu .col-so-voce{margin-top:16px}
.col-usu .col-achar svg{color:var(--pri)}

/* ---------- Foto: redonda = pessoa, quadrada = canal ---------- */
.user-photo{border-radius:50%!important}
.foto-ini,.foto-img,.av{border-radius:28%!important;overflow:hidden}
.foto-ini.grande{border-radius:26%!important}

/* ---------- Topo ---------- */
header.topo .dir{position:relative;align-items:center}
header.topo #theme-top{display:grid!important;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}

/* Logo que abre a Sua jornada: visível também no computador */
@media (min-width:769px){
  header.topo .info-btn{display:grid!important;place-items:center;position:relative;width:44px;height:44px;padding:0;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:0 2px 8px -2px rgba(0,0,0,.15);cursor:pointer;overflow:visible}
  header.topo .info-btn img{width:24px;height:24px;object-fit:contain}
}

/* ---------- Moeda de tema (sol / lua, gira ao trocar) ---------- */
.moeda{position:relative;display:grid;place-items:center;width:40px;height:40px;perspective:200px}
.moeda .disco{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--line);transition:transform .17s ease-in,background .2s}
.moeda .disco svg{width:19px;height:19px}
.moeda.dia .disco svg{color:var(--acc)}
.moeda.noite .disco{background:color-mix(in srgb,var(--fg) 14%,var(--bg))}
.moeda.noite .disco svg{color:var(--texto)}
.moeda .anel{position:absolute;inset:-2px;width:44px;height:44px;transform:rotate(-90deg);pointer-events:none}
.moeda .anel circle{fill:none;stroke-width:2.4}
.moeda .anel .trilho{stroke:var(--line)}
.moeda .anel .prog{stroke:var(--acc);stroke-linecap:round;transition:stroke-dasharray .6s}
.moeda.fechando .disco{transform:rotateY(90deg) scaleX(.12);background:var(--acc)}
.moeda.abrindo .disco{animation:moeda-abre .2s ease-out}
@keyframes moeda-abre{from{transform:rotateY(90deg) scaleX(.12);background:var(--acc)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.moeda .disco{transition:none}.moeda.abrindo .disco{animation:none}}
.fs-tema .moeda{width:36px;height:36px}

.menu-tema{position:absolute;top:calc(100% + 8px);right:0;z-index:80;width:290px;padding:8px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 48px -12px rgba(0,0,0,.28)}
.menu-tema .rotulo{margin:6px 10px 6px;color:var(--sub)}
.menu-tema button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--texto);font:inherit;text-align:left;cursor:pointer}
.menu-tema button svg{width:20px;height:20px;flex:none}
.menu-tema button span{display:grid;gap:1px}
.menu-tema button strong{font-weight:500;font-size:14px}
.menu-tema button small{font-size:12.5px;color:var(--sub)}
.menu-tema button:hover{background:var(--capa)}
.menu-tema button[aria-checked="true"]{background:color-mix(in srgb,var(--pri) 12%,var(--card));color:var(--tit)}
.menu-tema .mt-falta{display:grid;gap:6px;margin:6px 4px 2px;padding:10px 12px;border-radius:12px;background:var(--capa);font-size:12.5px;color:var(--texto)}
.menu-tema .mt-barra{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.menu-tema .mt-barra i{display:block;height:100%;background:var(--acc);border-radius:3px}

/* ---------- Chat flutuante: botão redondo afastado das bordas ---------- */
.mini-launch{width:60px!important;height:60px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;border:0!important;background:var(--pri)!important;color:var(--pri-fg)!important;box-shadow:0 2px 4px rgba(0,0,0,.08),0 16px 32px -10px rgba(0,0,0,.35)!important;right:32px!important;bottom:calc(32px + env(safe-area-inset-bottom,0px))!important}
.mini-launch svg{width:26px!important;height:26px!important}
.mini-launch .c-txt{display:none!important}
.mini-launch .c-badge{position:absolute!important;top:-2px!important;right:-2px!important;background:var(--acc)!important;color:#fff!important;border:2px solid var(--bg)!important}
@media (max-width:1199px){.mini-launch{right:16px!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;width:54px!important;height:54px!important}}

/* ---------- Acabamento ---------- */
h1{font-weight:600;letter-spacing:-.02em}
h2{font-weight:500;letter-spacing:-.01em}
.card,.bloco,.post,.canal-topo{border-radius:18px}
.post{border:1px solid var(--line)}

/* Correções pequenas */
.agenda-p li.vazio{display:block}
.menu-tema button small,.menu-tema button strong{line-height:1.35}
.menu-tema button{text-transform:none;letter-spacing:0}
