/* ============================================================
   CIUTEK - Tokens de design + Selo Ciutek (verificados)
   Marco 2.1 . 2026-09-03
   Tres niveis: Roxo (oficial), Azul (verificado), Dourado (autoridade).
   Roseta em CSS mask + gradiente metalico por variavel.
   Um arquivo. Sem imagem por selo. Escala em qualquer tamanho.
   ============================================================ */

:root{
  --ck-roxo-100:#e7dfff; --ck-roxo-200:#cfbcff; --ck-roxo-300:#b295ff;
  --ck-roxo-400:#9268fb; --ck-roxo-500:#7a41f0; --ck-roxo-600:#6528d4;
  --ck-roxo-700:#511ea9; --ck-roxo-800:#3b1580; --ck-roxo-900:#260d55;
  --ck-cor-primaria:var(--ck-roxo-500);

  --ck-fundo:#0d0a16; --ck-superficie:#171327; --ck-superficie-2:#1f1a33;
  --ck-borda:rgba(255,255,255,.10);
  --ck-texto:#efecf7; --ck-texto-suave:#a79fc0;

  --ck-vidro-fundo:rgba(31,26,51,.62);
  --ck-vidro-borda:rgba(255,255,255,.14);
  --ck-vidro-blur:14px;

  --ck-sombra-1:0 1px 2px rgba(0,0,0,.30);
  --ck-sombra-2:0 6px 18px -6px rgba(0,0,0,.45);
  --ck-sombra-3:0 18px 44px -12px rgba(0,0,0,.55);

  --ck-raio-p:8px; --ck-raio-m:14px; --ck-raio-g:22px; --ck-raio-total:999px;
  --ck-t-rapida:120ms; --ck-t-media:220ms;
  --ck-ease:cubic-bezier(.22,.61,.36,1);

  /* intensidade global dos efeitos: o admin controla de 0 a 1 */
  --ck-intensidade-efeitos:1;

  /* Tamanhos do selo. O padrao (17px) e calibrado para ficar
     na altura da maiuscula do nome sem competir com ele. */
  --ck-selo-p:14px;   /* comentarios, listas, chat */
  --ck-selo-m:17px;   /* publicacoes, mensagens - PADRAO */
  --ck-selo-g:21px;   /* cabecalhos */
  --ck-selo-xg:30px;  /* pagina de perfil */

  /* contorno da roseta - geometria propria do Ciutek */
  --ck-roseta:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20d%3D%27M50.00%2012.50Q64.88%20-5.54%2068.75%2017.52Q90.66%209.34%2082.48%2031.25Q105.54%2035.12%2087.50%2050.00Q105.54%2064.88%2082.48%2068.75Q90.66%2090.66%2068.75%2082.48Q64.88%20105.54%2050.00%2087.50Q35.12%20105.54%2031.25%2082.48Q9.34%2090.66%2017.52%2068.75Q-5.54%2064.88%2012.50%2050.00Q-5.54%2035.12%2017.52%2031.25Q9.34%209.34%2031.25%2017.52Q35.12%20-5.54%2050.00%2012.50Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
   SELO
   ============================================================ */

.ck-selo{
  /* paleta metalica: 1 claro, 2 medio, 3 profundo, 4 realce, 5 borda */
  --s1:#bfe0ff; --s2:#5aa6f5; --s3:#1c62cf; --s4:#8ec7ff; --s5:#0b3f96;
  --s-glifo:#fff;
  --s-tam:var(--ck-selo-m);

  position:relative; display:inline-grid; place-items:center;
  flex:0 0 auto; vertical-align:-.20em;
  width:var(--s-tam); height:var(--s-tam);
  background:linear-gradient(145deg,
    var(--s1) 0%, var(--s2) 17%, var(--s3) 33%,
    var(--s4) 50%, var(--s3) 67%, var(--s2) 84%, var(--s5) 100%);
  -webkit-mask:var(--ck-roseta) center / 100% 100% no-repeat;
          mask:var(--ck-roseta) center / 100% 100% no-repeat;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.42));
  transition:transform var(--ck-t-media) var(--ck-ease),
             filter var(--ck-t-media) var(--ck-ease);
}

/* domo de luz: da o volume 3D */
.ck-selo::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(58% 46% at 34% 20%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(70% 54% at 66% 104%, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 58%);
  opacity:var(--ck-intensidade-efeitos);
}

/* lampejo metalico ao passar o mouse */
.ck-selo::after{
  content:""; position:absolute; top:-40%; bottom:-40%; width:34%; left:-44%;
  z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  transform:skewX(-22deg);
}

.ck-selo svg{
  position:relative; z-index:1; width:56%; height:56%; display:block;
  overflow:visible; fill:none; stroke:var(--s-glifo);
  stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px .6px rgba(0,0,0,.34));
}

/* --- Tamanhos --- */
.ck-selo--p{--s-tam:var(--ck-selo-p)}
.ck-selo--m{--s-tam:var(--ck-selo-m)}
.ck-selo--g{--s-tam:var(--ck-selo-g)}
.ck-selo--xg{--s-tam:var(--ck-selo-xg)}

/* ============================================================
   OS TRES NIVEIS
   ============================================================ */

/* ROXO - Perfil oficial do Ciutek (so a plataforma) */
.ck-selo--oficial{
  --s1:#e4d0ff; --s2:#a76dff; --s3:#6f22dd;
  --s4:#c9a6ff; --s5:#43128f;
}

/* AZUL - Conta verificada (cadastro completo + aprovacao) */
.ck-selo--verificado{
  --s1:#cfe8ff; --s2:#5fa9f7; --s3:#1a5fd0;
  --s4:#96caff; --s5:#0a3a8f;
}

/* DOURADO - Autoridade maxima (merito e dedicacao) */
.ck-selo--autoridade{
  --s1:#fff6d4; --s2:#f0cd68; --s3:#c1901c;
  --s4:#ffe7a0; --s5:#8a6108;
  --s-glifo:#fffdf5;
}

/* ============================================================
   MOVIMENTO E ACESSIBILIDADE
   ============================================================ */

@media (hover:hover){
  .ck-selo:hover{
    transform:translateY(-1px) scale(1.08);
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
  }
  .ck-selo:hover::after{animation:ck-lampejo 700ms var(--ck-ease)}
}
@keyframes ck-lampejo{
  0%{left:-44%; opacity:0}
  28%{opacity:calc(1 * var(--ck-intensidade-efeitos))}
  100%{left:110%; opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .ck-selo,.ck-selo:hover{transition:none; transform:none}
  .ck-selo::after{display:none}
}

/* aparelhos simples: mantem o gradiente, corta o custo do filtro */
@media (max-width:480px){
  .ck-selo{filter:none}
  .ck-selo:hover{filter:none}
}

.ck-selo:focus-visible{outline:2px solid var(--ck-roxo-300); outline-offset:3px}

/* ============================================================
   NOME + SELO  (usar em toda area onde o nome aparece)
   ============================================================ */

.ck-nome{display:inline-flex; align-items:center; gap:.32em; min-width:0; max-width:100%}
.ck-nome__texto{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* dica ao passar o mouse ou focar */
.ck-selo-wrap{position:relative; display:inline-flex; align-items:center}
.ck-selo-wrap>.ck-dica{
  position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  background:rgba(24,20,40,.95); color:#efecf7;
  border:1px solid rgba(255,255,255,.14);
  font-size:12px; line-height:1.35; font-weight:500;
  padding:7px 11px; border-radius:8px; white-space:nowrap;
  pointer-events:none; opacity:0; visibility:hidden; z-index:70;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
  transition:opacity var(--ck-t-rapida) var(--ck-ease),
             transform var(--ck-t-rapida) var(--ck-ease), visibility var(--ck-t-rapida);
}
.ck-selo-wrap:hover>.ck-dica,
.ck-selo-wrap:focus-within>.ck-dica{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

/* ============================================================
   PONTE COM O BASE TÉCNICA
   O base técnica ja desenha o verificado com .verified-color em
   feed, comentarios, busca, popover, mensagens e perfil.
   Em vez de editar dezenas de templates, transformamos essa
   classe no Selo Ciutek. Nenhum template foi alterado.
   ============================================================ */

.verified-color{
  /* --ck-tam-atual guarda o tamanho do selo naquele contexto. Alinhamento e
     espaco saem dele, entao os tres ficam coerentes em qualquer tela. */
  --ck-tam-atual:var(--ck-selo-m);

  display:inline-block !important;
  width:var(--ck-tam-atual) !important;
  height:var(--ck-tam-atual) !important;
  min-width:var(--ck-tam-atual) !important;
  flex:0 0 auto !important;
  align-self:center !important;

  /* O selo precisa herdar o tamanho da fonte do nome: e a partir dele que se
     acha a metade da altura das maiusculas, onde o selo deve ficar centrado.
     Com font-size:0 o "em" virava zero e o selo encostava na linha de base,
     ficando alto no post e baixo no perfil. */
  font-size:inherit !important;
  line-height:0 !important;
  vertical-align:calc(.41em - var(--ck-tam-atual) / 2) !important;

  /* Espaco proporcional: o valor do painel vale no tamanho padrao (o do post)
     e encolhe junto com selos menores, para a distancia parecer a mesma.
     O min() impede que cresca em selos maiores, como o do cabecalho do perfil. */
  margin-left:min(
      var(--ck-selo-espaco, 5px),
      calc(var(--ck-selo-espaco, 5px) * var(--ck-tam-atual) / var(--ck-selo-m))
    ) !important;
  margin-right:0 !important;

  border:0 !important; border-radius:0 !important; padding:0 !important;
  stroke:none !important; fill:none !important; color:transparent !important;
  overflow:hidden !important;

  background-image:
    /* realce opcional: invisivel enquanto a intensidade for 0 no painel */
    radial-gradient(58% 46% at 32% 18%,
      rgba(255,255,255, calc(.55 * var(--ck-intensidade-efeitos, 0))) 0%,
      rgba(255,255,255,0) 66%),
    /* Degrade natural, do claro no alto a esquerda ao profundo embaixo a direita.
       As cinco paradas do painel entram em ordem de luz: realce, brilho, meio,
       profundo e borda. Sem branco por cima, para o simbolo continuar legivel. */
    linear-gradient(152deg,
      var(--s1,#a8d5ff) 0%,
      var(--s4,#86c2ff) 20%,
      var(--s2,#4a9bf0) 47%,
      var(--s3,#1560ce) 78%,
      var(--s5,#073a86) 100%) !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  -webkit-mask:var(--ck-roseta) center / 100% 100% no-repeat !important;
          mask:var(--ck-roseta) center / 100% 100% no-repeat !important;
  transition:transform var(--ck-t-media) var(--ck-ease);
}
/* O base técnica tambem imprime um selo DENTRO do link do avatar, pensado como
   sobreposicao na foto. Com o selo do Ciutek ele escorregava para baixo da
   imagem e aparecia torto. Como o nome ja mostra o selo, este fica oculto. */
.avatar > .verified-color,
a.avatar .verified-color,
a.wow_post_usr_ava .verified-color,
.wow_post_usr_ava > .verified-color{
  display:none !important;
}

/* filhos originais do base técnica ficam ocultos, menos o check do Ciutek */
.verified-color > *:not(.ck-check){display:none !important}

/* Os niveis nao definem cor aqui de proposito.
   Quem define e o painel administrativo, em selo-config.css.
   Assim uma unica origem controla a aparencia e nao ha briga de CSS. */

/* tamanhos por contexto, sem editar template */
/* Tamanhos por contexto. Basta trocar a variavel: largura, altura,
   alinhamento e espaco se ajustam sozinhos a partir dela. */
.comment-body .verified-color,
.comment_content .verified-color,
.comment-heading .verified-color,
.chat-message .verified-color,
.message-text .verified-color{
  --ck-tam-atual:var(--ck-selo-p);
}
/* Cabecalho do perfil: o nome ali e bem maior, entao o selo acompanha. */
.pic-info-cont .title .verified-color,
.hovercard .title .verified-color,
.profile-header .verified-color,
.user-profile-header .verified-color,
.profile-cover .verified-color{
  --ck-tam-atual:var(--ck-selo-g);
}

@media (hover:hover){
  .verified-color:hover{transform:translateY(-1px) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .verified-color{transition:none}
  .verified-color:hover{transform:none}
}

/* check do Ciutek, desenhado como path real dentro do proprio <svg>.
   background-image nao pinta de forma confiavel sobre elemento SVG,
   entao o simbolo vira conteudo do SVG e a mascara da roseta o preserva. */
.verified-color .ck-check{
  display:block !important;
  fill:none !important;
  stroke:var(--s-glifo, #fff) !important;
  /* divide pela escala para que espessura e tamanho sejam controles independentes:
     o transform:scale logo abaixo multiplica de volta */
  stroke-width:calc(var(--ck-check-espessura, 2) / var(--ck-check-escala, .78)) !important;
  stroke-linecap:var(--ck-check-ponta, round) !important;
  stroke-linejoin:var(--ck-check-ponta, round) !important;
  paint-order:stroke !important;
  transform-box:view-box;
  transform-origin:12px 12.1px;
  transform:scale(var(--ck-check-escala, .78));
}
/* Quando o base técnica imprime o selo como <span> (comentarios, por exemplo),
   o simbolo vira um <svg> interno. O tema tem regra propria para <svg>, que
   forcava 18px e jogava o simbolo para fora do centro do selo. Aqui a caixa
   do simbolo e travada no tamanho exato do selo. */
.verified-color.ck-span{position:relative !important}
.verified-color.ck-span > svg.ck-check-svg{
  position:absolute !important;
  left:0 !important; top:0 !important; right:auto !important; bottom:auto !important;
  width:100% !important; height:100% !important;
  min-width:0 !important; max-width:none !important;
  min-height:0 !important; max-height:none !important;
  margin:0 !important; padding:0 !important;
  border:0 !important;
  transform:none !important;
  vertical-align:baseline !important;
  display:block !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   CIUTEK . Imagens responsivas sem distorcer
   O envio ja reduz a foto para a proporcao ideal (ciutek/lib/imagem.php).
   Aqui garantimos que nenhuma imagem seja esticada na exibicao:
   - foto de perfil, capa e story preenchem o quadro cortando a sobra
   - foto de publicacao cabe inteira, sem cortar e sem achatar
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.avatar img,
.wow_post_usr_ava img,
.profile-picture img,
.user-avatar img,
.user_avatar img,
.hovercard .user-image img,
.pic-info-cont img,
.cover img,
.profile-cover img,
.cover-picture img,
.story-item img,
.see_all_stories img,
.messages-recipients-list .avatar img{
  object-fit:cover !important;
  object-position:center center !important;
}

/* Publicacao, album e visualizador: a foto aparece inteira. */
.post-file img,
img.image-file,
.wo_shared_doc_file img,
.lightbox img,
.album-photo img{
  object-fit:contain !important;
  object-position:center center !important;
}

/* Nenhuma imagem passa da largura do seu contêiner, em qualquer tela. */
.post-file img,
img.image-file,
.avatar img,
.wow_post_usr_ava img,
.pic-info-cont img{
  max-width:100% !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   CIUTEK . Seletor de idioma
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.ck-idioma-li{list-style:none;display:inline-flex;align-items:center}

.ck-idioma-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; margin:0 4px;
  background:transparent; border:0; border-radius:12px;
  cursor:pointer; color:var(--ck-roxo-400,#9268fb);
  transition:background var(--ck-t-rapida,.16s) var(--ck-ease,ease),
             transform var(--ck-t-rapida,.16s) var(--ck-ease,ease);
}
.ck-idioma-btn:hover{background:rgba(124,58,237,.14); transform:translateY(-1px)}
.ck-idioma-btn:active{transform:translateY(0)}
.ck-idioma-btn:focus-visible{outline:2px solid var(--ck-roxo-300,#b295ff); outline-offset:2px}

.ck-idioma__icone{width:22px; height:22px; display:block; overflow:visible}
.ck-i-esfera{fill:none; stroke:currentColor; stroke-width:1.6}
.ck-i-linha{fill:none; stroke:currentColor; stroke-width:1.4; opacity:.85}
.ck-i-brilho{fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; opacity:.5}

/* painel */
.ck-idioma{position:fixed; inset:0; z-index:99999; display:flex;
  align-items:center; justify-content:center; padding:18px;
  opacity:0; transition:opacity .16s ease}
.ck-idioma--aberto{opacity:1}
.ck-idioma__fundo{position:absolute; inset:0; background:rgba(9,6,15,.62); backdrop-filter:blur(3px)}

.ck-idioma__cartao{
  position:relative; width:min(420px,100%); max-height:min(70vh,560px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ck-superficie,#1B1029);
  color:var(--ck-texto,#FAF7FF);
  border:1px solid rgba(196,167,255,.18);
  border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7);
  transform:translateY(8px) scale(.98);
  transition:transform .18s cubic-bezier(.2,.8,.3,1);
}
.ck-idioma--aberto .ck-idioma__cartao{transform:none}

.ck-idioma__topo{display:flex; align-items:center; gap:12px;
  padding:16px 16px 14px; border-bottom:1px solid rgba(196,167,255,.14)}
.ck-idioma__topo .ck-idioma__icone{width:30px; height:30px; color:var(--ck-roxo-300,#b295ff); flex:0 0 auto}
.ck-idioma__topo strong{display:block; font-size:15px; line-height:1.2}
.ck-idioma__topo small{display:block; font-size:12px; opacity:.66; margin-top:2px}
.ck-idioma__x{margin-left:auto; background:transparent; border:0; cursor:pointer;
  color:inherit; opacity:.6; font-size:24px; line-height:1; padding:2px 6px; border-radius:8px}
.ck-idioma__x:hover{opacity:1; background:rgba(255,255,255,.08)}

.ck-idioma__lista{overflow-y:auto; padding:8px; -webkit-overflow-scrolling:touch}
.ck-idioma__item{display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; background:transparent; border:0; border-radius:12px;
  color:inherit; font-size:14.5px; text-align:left; cursor:pointer;
  transition:background .14s ease}
.ck-idioma__item:hover{background:rgba(124,58,237,.16)}
.ck-idioma__item:focus-visible{outline:2px solid var(--ck-roxo-300,#b295ff); outline-offset:-2px}
.ck-idioma__nome{flex:1 1 auto}
.ck-idioma__item--atual{background:rgba(124,58,237,.20); font-weight:600}
.ck-idioma__ok{width:18px; height:18px; flex:0 0 auto; fill:none;
  stroke:var(--ck-roxo-300,#b295ff); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* no celular o painel vira uma folha que sobe pela base */
@media (max-width:600px){
  .ck-idioma{align-items:flex-end; padding:0}
  .ck-idioma__cartao{width:100%; max-height:76vh;
    border-radius:20px 20px 0 0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(16px)}
  .ck-idioma__item{padding:14px 12px}   /* area de toque confortavel */
}

@media (prefers-reduced-motion:reduce){
  .ck-idioma, .ck-idioma__cartao, .ck-idioma-btn{transition:none}
  .ck-idioma__cartao{transform:none}
}