/* =================================================================
   Ciutek - Sistema de icones roxos em vetor 3D
   Folha unica do componente. Controla cor, profundidade, tamanho,
   estados e o indicador de notificacao.
   Nao ha filtro de SVG aqui: a profundidade sai de camadas, entao o
   custo de pintura no celular continua o mesmo de um icone chapado.
   ================================================================= */

/* -----------------------------------------------------------------
   1. Variaveis - tema escuro (padrao)
   O traco anda do lilas claro para o roxo forte, de cima para baixo:
   e isso que da a leitura de volume sem brilho exagerado.
   ----------------------------------------------------------------- */
:root{
  --ck-i-traco-a:#cfbcff;
  --ck-i-traco-b:#8757f4;
  --ck-i-corpo-a:rgba(146,104,251,.20);
  --ck-i-corpo-b:rgba(101,40,212,.07);
  --ck-i-luz-a:rgba(255,255,255,.85);
  --ck-i-luz-b:rgba(255,255,255,.08);
  --ck-i-sombra:#2b0f63;
  --ck-i-sombra-opacidade:.55;
  --ck-i-luz-opacidade:.5;

  --ck-i-ativo-a:#e7dfff;
  --ck-i-ativo-b:#9268fb;
  --ck-i-ativo-corpo-a:rgba(178,149,255,.34);
  --ck-i-ativo-corpo-b:rgba(122,65,240,.14);

  --ck-i-ponto:#7a41f0;
  --ck-i-ponto-texto:#ffffff;
  --ck-i-ponto-anel:var(--ck-superficie,#171327);
}

/* -----------------------------------------------------------------
   2. Variaveis - tema claro
   Os mesmos desenhos, tons mais fundos, para nao sumir no branco.
   ----------------------------------------------------------------- */
:root[data-ck-tema="claro"]{
  --ck-i-traco-a:#7a41f0;
  --ck-i-traco-b:#4a1a9e;
  --ck-i-corpo-a:rgba(122,65,240,.14);
  --ck-i-corpo-b:rgba(59,21,128,.05);
  --ck-i-luz-a:rgba(255,255,255,.9);
  --ck-i-luz-b:rgba(255,255,255,.1);
  --ck-i-sombra:#b295ff;
  --ck-i-sombra-opacidade:.5;
  --ck-i-luz-opacidade:.32;

  --ck-i-ativo-a:#6528d4;
  --ck-i-ativo-b:#3b1580;
  --ck-i-ativo-corpo-a:rgba(101,40,212,.20);
  --ck-i-ativo-corpo-b:rgba(59,21,128,.08);

  --ck-i-ponto:#6528d4;
  --ck-i-ponto-texto:#ffffff;
  --ck-i-ponto-anel:#ffffff;
}

/* -----------------------------------------------------------------
   3. O icone
   ----------------------------------------------------------------- */
svg.ck-i{
  display:block;
  flex:0 0 auto;
  overflow:visible;
  vector-effect:non-scaling-stroke;
  transition:transform .16s ease, opacity .16s ease;
}

svg.ck-i .ck-i__traco{ stroke:url(#ckIconeTraco); }
svg.ck-i .ck-i__corpo{ fill:url(#ckIconeCorpo); stroke:none; }
svg.ck-i .ck-i__luz{
  stroke:url(#ckIconeLuz);
  stroke-width:1.1;
  opacity:var(--ck-i-luz-opacidade);
}
svg.ck-i .ck-i__sombra{
  stroke:var(--ck-i-sombra);
  opacity:var(--ck-i-sombra-opacidade);
}
svg.ck-i .ck-i__ponto-fixo{ fill:url(#ckIconeTraco); stroke:none; }

/* Se o degrade nao resolver (SVG inline copiado para fora do
   documento, impressao, navegador antigo), o traco cai para uma cor
   solida em vez de sumir. */
@supports not (fill: url(#ckIconeTraco)){
  svg.ck-i .ck-i__traco{ stroke:var(--ck-i-traco-b); }
  svg.ck-i .ck-i__corpo{ fill:none; }
}

/* -----------------------------------------------------------------
   4. Estados
   ----------------------------------------------------------------- */

/* ativo: mais claro, corpo mais presente, um passo a frente */
svg.ck-i--ativo .ck-i__traco,
.ck-ativo > svg.ck-i .ck-i__traco,
[aria-current="page"] > svg.ck-i .ck-i__traco{
  stroke:url(#ckIconeTraco);
  stroke-width:1.85;
}
svg.ck-i--ativo,
.ck-ativo > svg.ck-i,
[aria-current="page"] > svg.ck-i{
  --ck-i-traco-a:var(--ck-i-ativo-a);
  --ck-i-traco-b:var(--ck-i-ativo-b);
  --ck-i-corpo-a:var(--ck-i-ativo-corpo-a);
  --ck-i-corpo-b:var(--ck-i-ativo-corpo-b);
  --ck-i-sombra-opacidade:.7;
}

/* passar o mouse: uma elevacao pequena, nada de salto */
@media (hover:hover) and (pointer:fine){
  a:hover > svg.ck-i,
  button:hover > svg.ck-i,
  .ck-i-alvo:hover > svg.ck-i{
    transform:translateY(-1px);
    --ck-i-sombra-opacidade:.75;
  }
}

/* apertar: afunda, devolvendo a sensacao de peso */
a:active > svg.ck-i,
button:active > svg.ck-i,
.ck-i-alvo:active > svg.ck-i{
  transform:translateY(.5px) scale(.96);
  --ck-i-sombra-opacidade:.25;
  transition-duration:.06s;
}

/* foco de teclado: sempre visivel, nos dois temas */
a:focus-visible > svg.ck-i,
button:focus-visible > svg.ck-i,
.ck-i-alvo:focus-visible > svg.ck-i{
  --ck-i-traco-a:var(--ck-i-ativo-a);
  --ck-i-traco-b:var(--ck-i-ativo-b);
}
a:focus-visible,
button:focus-visible,
.ck-i-alvo:focus-visible{
  outline:2px solid var(--ck-roxo-400,#9268fb);
  outline-offset:2px;
  border-radius:12px;
}

/* desabilitado */
svg.ck-i--desabilitado,
[disabled] > svg.ck-i,
[aria-disabled="true"] > svg.ck-i{
  opacity:.38;
  --ck-i-sombra-opacidade:0;
  --ck-i-luz-opacidade:0;
}

/* quem pediu menos movimento, recebe menos movimento */
@media (prefers-reduced-motion:reduce){
  svg.ck-i{ transition:none; }
  a:hover > svg.ck-i, button:hover > svg.ck-i, .ck-i-alvo:hover > svg.ck-i{ transform:none; }
  a:active > svg.ck-i, button:active > svg.ck-i, .ck-i-alvo:active > svg.ck-i{ transform:none; }
}

/* -----------------------------------------------------------------
   5. Alvo de toque
   O desenho continua com 24px; quem cresce e a area clicavel.
   ----------------------------------------------------------------- */
.ck-i-alvo{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border:0;
  background:transparent;
  border-radius:14px;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:767px){
  .ck-i-alvo{ min-width:46px; min-height:46px; }
}

/* -----------------------------------------------------------------
   6. Indicador de notificacao
   Um ponto pequeno com anel da cor da superficie, para descolar do
   icone sem precisar de brilho.
   ----------------------------------------------------------------- */
.ck-i-ponto{
  position:absolute;
  top:6px;
  right:6px;
  min-width:9px;
  height:9px;
  padding:0;
  border-radius:99px;
  background:var(--ck-i-ponto);
  box-shadow:0 0 0 2px var(--ck-i-ponto-anel);
  pointer-events:none;
}
.ck-i-ponto--numero{
  min-width:17px;
  height:17px;
  top:2px;
  right:1px;
  padding:0 4px;
  font-size:10px;
  line-height:17px;
  font-weight:700;
  text-align:center;
  color:var(--ck-i-ponto-texto);
  letter-spacing:0;
}

/* -----------------------------------------------------------------
   7. Rotulo que aparece ao passar o mouse (so no computador)
   O nome fica fora do fluxo, entao nada se desloca quando ele surge.
   ----------------------------------------------------------------- */
.ck-i-nome{
  position:absolute!important;
  width:1px;height:1px;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .ck-i-dica{ position:relative; }
  .ck-i-dica::after{
    content:attr(data-ck-nome);
    position:absolute;
    left:calc(100% + 10px);
    top:50%;
    transform:translateY(-50%) translateX(-4px);
    padding:6px 10px;
    border-radius:10px;
    font-size:12.5px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    color:var(--ck-texto,#efecf7);
    background:var(--ck-superficie-3,#292140);
    border:1px solid var(--ck-borda,rgba(255,255,255,.10));
    box-shadow:0 8px 22px rgba(11,4,28,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .14s ease, transform .14s ease;
    z-index:1200;
  }
  .ck-i-dica:hover::after,
  .ck-i-dica:focus-visible::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
}
:root[data-ck-tema="claro"] .ck-i-dica::after{
  color:#241143;
  background:#ffffff;
  border-color:rgba(38,13,85,.12);
  box-shadow:0 8px 22px rgba(38,13,85,.14);
}

/* -----------------------------------------------------------------
   8. Tamanhos de apoio
   ----------------------------------------------------------------- */
svg.ck-i--p{ width:18px;height:18px; }
svg.ck-i--g{ width:28px;height:28px; }
svg.ck-i--gg{ width:34px;height:34px; }

/* Em tela pequena o traco engrossa um pouco: o desenho continua
   legivel mesmo com a densidade de pixel do celular. */
@media (max-width:767px){
  svg.ck-i{ stroke-width:1.8; }
}

/* -----------------------------------------------------------------
   9. Barra de filtro do mural
   O item vira so o icone, centralizado, com area de toque folgada.
   ----------------------------------------------------------------- */
.ctk-app li.ck-filtro{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border-radius:999px;
  /* O tema pinta cada filtro de uma cor pastel diferente (verde, azul,
     amarelo, rosa). Com o desenho roxo por cima isso viraria arco-iris,
     entao a pastilha volta a ser neutra e so a ativa recebe o roxo. */
  background:var(--ck-superficie-2,#1f1a33)!important;
  border:1px solid var(--ck-borda,rgba(255,255,255,.10))!important;
  transition:background .16s ease, border-color .16s ease;
}
:root[data-ck-tema="claro"] .ctk-app li.ck-filtro{
  background:#f3effc!important;
  border-color:rgba(38,13,85,.08)!important;
}
.ctk-app li.ck-filtro:hover{
  background:var(--ck-superficie-3,#292140)!important;
}
:root[data-ck-tema="claro"] .ctk-app li.ck-filtro:hover{
  background:#e9e0fb!important;
}
.ctk-app li.ck-filtro.avtive,
.ctk-app li.ck-filtro.active{
  background:var(--ck-roxo-500,#7a41f0)!important;
  border-color:var(--ck-roxo-500,#7a41f0)!important;
}
/* Na pastilha ativa o fundo ja e roxo forte: o desenho passa a claro. */
.ctk-app li.ck-filtro.avtive > svg.ck-i,
.ctk-app li.ck-filtro.active > svg.ck-i{
  --ck-i-traco-a:#ffffff;
  --ck-i-traco-b:#e7dfff;
  --ck-i-corpo-a:rgba(255,255,255,.24);
  --ck-i-corpo-b:rgba(255,255,255,.08);
  --ck-i-sombra:#3b1580;
}


/* O tema pinta um circulo colorido ATRAS de cada filtro, com um
   pseudo-elemento (verde para foto, azul para video, rosa para gif...).
   E dali que vinha o arco-iris, nao do fundo do item. */
.ctk-app li.ck-filtro::before{
  background:transparent!important;
  box-shadow:none!important;
}
.ctk-app li.ck-filtro.avtive::before,
.ctk-app li.ck-filtro.active::before{
  background:var(--ck-roxo-500,#7a41f0)!important;
}
/* O filtro ativo do tema fica cinza-escuro; aqui ele assume o roxo. */
.ctk-app li.ck-filtro.avtive.filter_negative_clr,
.ctk-app li.ck-filtro.avtive,
.ctk-app li.ck-filtro.active{
  background:var(--ck-roxo-500,#7a41f0)!important;
  border-color:var(--ck-roxo-500,#7a41f0)!important;
}

/* O tema pinta o filtro ativo com uma regra de ID:
     #filterby-post .avtive { background: currentcolor !important }
   Um seletor de ID com !important nao se vence por especificidade sem
   exagero. Em vez de brigar, muda-se a fonte: a cor do proprio item.
   Assim o currentcolor do tema passa a ser o roxo da Ciutek. */
.ctk-app li.ck-filtro.avtive,
.ctk-app li.ck-filtro.active{
  color:var(--ck-roxo-500,#7a41f0)!important;
}

/* ============================================================
   A trilha do Criar: menor e sem sobressalto
   ------------------------------------------------------------
   Os sete circulos (grade, texto, foto, video, som, documento e
   GIF) sao os botoes de filtro da propria plataforma. Ela pinta o
   fundo de cinza claro ao passar o ponteiro e ainda desenha um
   circulo de cor solida por baixo; com o simbolo grande, o
   conjunto dava a impressao de pular a cada passada.

   Aqui o circulo fica um pouco menor, o simbolo tambem, e a troca
   passa a ser so de luz: nenhum deslocamento, nenhuma escala. O
   item selecionado continua com o desenho da plataforma, que e
   quem marca qual filtro esta ligado.
   ============================================================ */
.ctk-app ul.list-group.filterby > li.filter-by-li {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  padding: 0 !important;
  margin: 10px 3px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transform: none !important;
  transition: background .16s ease, box-shadow .16s ease !important;
}
.ctk-app ul.list-group.filterby > li.filter-by-li svg {
  width: 18px !important;
  height: 18px !important;
  transform: none !important;
}
.ctk-app ul.list-group.filterby > li.filter-by-li:hover,
.ctk-app ul.list-group.filterby > li.filter-by-li:hover svg {
  transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .ctk-app ul.list-group.filterby > li.filter-by-li:not(.avtive):hover {
    background: rgba(150, 96, 255, .14) !important;
    box-shadow: inset 0 0 0 1px rgba(178, 149, 255, .28);
  }
  html[data-ck-tema~="claro"] .ctk-app ul.list-group.filterby > li.filter-by-li:not(.avtive):hover {
    background: rgba(101, 40, 212, .10) !important;
    box-shadow: inset 0 0 0 1px rgba(101, 40, 212, .20);
  }
}
.ctk-app ul.list-group.filterby > li.filter-by-li:active {
  filter: brightness(.94);
}