/* ··························································································
   CIUTEK - Velvet Nexus: foto de perfil e capa

   Trocar a foto ou a capa e uma alteracao de configuracao do perfil. O sistema
   ja nao publica mais nada sozinho (a correcao esta em functions_one.php). O que
   este arquivo veste e o que passou a existir no lugar do post automatico:
   um aviso do que aconteceu e, se a pessoa quiser, um convite explicito para
   compartilhar - desligado por padrao, nunca marcado de antemao.
   ·························································································· */

.ctk-app .ck-img {
  --ck-img-fundo:   var(--ck-superficie-2, #1f1a33);
  --ck-img-borda:   rgba(255, 255, 255, .10);
  --ck-img-texto:   var(--ck-texto, #efecf7);
  --ck-img-apagado: var(--ck-texto-3, #8e7fb4);
  --ck-img-roxo:    var(--ck-roxo-500, #7a41f0);
  --ck-img-roxo-claro: var(--ck-roxo-400, #9a6bff);
}

/* o aviso, no alto da tela, sem cobrir a navegacao */
.ctk-app .ck-img__aviso {
  position: fixed;
  z-index: 100001;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 460px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--ck-img-borda);
  background: var(--ck-img-fundo);
  color: var(--ck-img-texto);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
  font-size: 14px;
  line-height: 1.4;
  animation: ck-img-entra .22s ease both;
}
@keyframes ck-img-entra {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.ctk-app .ck-img__aviso--erro { border-color: rgba(255, 90, 90, .34); }
.ctk-app .ck-img__marca {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(122, 65, 240, .18);
  color: var(--ck-img-roxo-claro);
}
.ctk-app .ck-img__aviso--erro .ck-img__marca { background: rgba(255, 90, 90, .16); color: #ffb4b4; }
.ctk-app .ck-img__marca svg { width: 18px; height: 18px; }
.ctk-app .ck-img__corpo { flex: 1 1 auto; min-width: 0; }
.ctk-app .ck-img__titulo { font-weight: 650; }

/* o convite: um botao comum, apagado, que nao parece o caminho principal */
.ctk-app .ck-img__compartilhar {
  margin-top: 9px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(178, 149, 255, .34);
  border-radius: 10px;
  background: none;
  color: var(--ck-img-roxo-claro);
  font-family: inherit;
  font-size: 13px;
  font-weight: 640;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.ctk-app .ck-img__compartilhar:hover { background: rgba(150, 96, 255, .12); }
.ctk-app .ck-img__fechar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ck-img-apagado);
  cursor: pointer;
}
.ctk-app .ck-img__fechar:hover { background: rgba(255, 255, 255, .07); color: var(--ck-img-texto); }
.ctk-app .ck-img__fechar svg { width: 14px; height: 14px; }

/* a confirmacao */
.ctk-app .ck-img__pergunta {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(6, 2, 12, .82);
}
.ctk-app .ck-img__cartao {
  width: 100%;
  max-width: 360px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--ck-img-borda);
  background: var(--ck-img-fundo);
  color: var(--ck-img-texto);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .6);
  text-align: center;
}
.ctk-app .ck-img__pergunta-texto {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.ctk-app .ck-img__botoes { display: flex; gap: 9px; }
.ctk-app .ck-img__botao {
  flex: 1 1 0;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.ctk-app .ck-img__botao--nao {
  background: rgba(255, 255, 255, .07);
  color: var(--ck-img-texto);
}
.ctk-app .ck-img__botao--sim {
  background: linear-gradient(135deg, var(--ck-img-roxo-claro), var(--ck-img-roxo));
  color: #fff;
}
.ctk-app .ck-img__botao:active { transform: scale(.98); }

:root[data-ck-tema="claro"] .ctk-app .ck-img {
  --ck-img-fundo:   #ffffff;
  --ck-img-borda:   rgba(23, 16, 40, .14);
  --ck-img-texto:   #1b1430;
  --ck-img-apagado: #6b5f85;
  --ck-img-roxo-claro: #6528d4;
}
:root[data-ck-tema="claro"] .ctk-app .ck-img__pergunta { background: rgba(23, 16, 40, .55); }
:root[data-ck-tema="claro"] .ctk-app .ck-img__botao--nao { background: #efe8ff; color: #1b1430; }

@media (prefers-reduced-motion: reduce) {
  .ctk-app .ck-img__aviso { animation: none; }
  .ctk-app .ck-img__compartilhar { transition: none; }
}