/* ··························································································
   CIUTEK - Velvet Nexus: a enquete

   A enquete NAO foi reescrita. A plataforma ja tem uma que funciona de verdade:
   o formulario #poll-form dentro do criador, o voto por Wo_VoteUp(), a trava de
   voto repetido por Wo_IsPostVoted() e a contagem, tudo no servidor. O que
   faltava era ela ser encontravel: vivia atras de um icone de 26 px no meio de
   outros dez, na barra de ferramentas do criador.

   Este arquivo veste duas coisas:
   1. o criador - o interruptor Texto/Enquete, os campos e a previa;
   2. a enquete ja publicada - opcoes, barras de resultado e porcentagens.

   Todas as cores saem das fichas do tema, entao claro e escuro se resolvem
   sozinhos: aqui so as fichas mudam de valor.
   ·························································································· */

/* As fichas ficam no .ctk-app, nao na classe .ck-enq.

   Erro que isto conserta: eu tinha declarado as fichas em .ck-enq, mas
   metade dos elementos vestidos aqui e da propria plataforma - o
   #poll-form, os campos .form-control, o botao #add_answer - e nenhum
   deles tem essa classe. Sem heranca, todo var(--ck-enq-*) caia no valor
   de reserva, que e o escuro. No tema claro os campos continuavam
   escuros com letra escura. Declarando no .ctk-app, que e o body, todo
   descendente herda - os meus elementos e os da plataforma. */
.ctk-app {
  --ck-enq-fundo:      var(--ck-superficie-2, #1f1a33);
  --ck-enq-campo:      rgba(255, 255, 255, .05);
  --ck-enq-borda:      rgba(255, 255, 255, .10);
  --ck-enq-borda-viva: rgba(178, 149, 255, .42);
  --ck-enq-texto:      var(--ck-texto, #efecf7);
  --ck-enq-apagado:    var(--ck-texto-3, #8e7fb4);
  --ck-enq-roxo:       var(--ck-roxo-500, #7a41f0);
  --ck-enq-roxo-claro: var(--ck-roxo-400, #9a6bff);
}

/* --------------------------------------------------------------------------
   1. O interruptor Texto / Enquete
   Duas pastilhas numa trilha so. O estado ativo e dito por cor E por
   aria-selected: quem usa leitor de tela ouve qual esta escolhida.
   -------------------------------------------------------------------------- */
.ctk-app .ck-enq__abas {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 12px;
  padding: 3px;
  border-radius: 12px;
  background: var(--ck-enq-campo, rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px var(--ck-enq-borda, rgba(255,255,255,.10));
}
.ctk-app .ck-enq__aba {
  appearance: none;
  min-height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ck-enq-apagado, #8e7fb4);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.ctk-app .ck-enq__aba svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ctk-app .ck-enq__aba:hover { color: var(--ck-enq-texto, #efecf7); }
.ctk-app .ck-enq__aba[aria-selected="true"] {
  background: linear-gradient(135deg, var(--ck-enq-roxo-claro), var(--ck-enq-roxo));
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(122, 65, 240, .32);
}
.ctk-app .ck-enq__aba:focus-visible {
  outline: 2px solid var(--ck-foco, #b295ff);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Os campos da enquete no criador
   -------------------------------------------------------------------------- */
.ctk-app #poll-form { padding: 2px 0 4px; }
.ctk-app #poll-form .answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ctk-app #poll-form .answers span { display: block; }
.ctk-app #poll-form .answers input.form-control {
  width: 100%;
  min-height: 44px;
  padding: 0 14px !important;
  border: 1px solid var(--ck-enq-borda, rgba(255,255,255,.10)) !important;
  border-radius: 12px !important;
  background: var(--ck-enq-campo, rgba(255,255,255,.05)) !important;
  color: var(--ck-enq-texto, #efecf7) !important;
  font-family: inherit;
  font-size: 14px;
  box-shadow: none !important;
  transition: border-color .16s ease, background .16s ease;
}
.ctk-app #poll-form .answers input.form-control::placeholder { color: var(--ck-enq-apagado, #8e7fb4); }
.ctk-app #poll-form .answers input.form-control:focus {
  border-color: var(--ck-enq-borda-viva, rgba(178,149,255,.42)) !important;
  outline: none;
}

.ctk-app #poll-form #add_answer.create-poll {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px dashed var(--ck-enq-borda-viva, rgba(178,149,255,.42));
  border-radius: 11px;
  background: none;
  color: var(--ck-enq-roxo-claro, #9a6bff);
  font-size: 13px;
  font-weight: 640;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.ctk-app #poll-form #add_answer.create-poll:hover {
  background: rgba(150, 96, 255, .10);
  border-color: var(--ck-enq-roxo-claro, #9a6bff);
}
.ctk-app #poll-form #add_answer .create-text { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   3. A previa
   Mostra a pergunta e as opcoes como elas vao aparecer no feed. E so leitura:
   nao recebe clique nem foco, para ninguem tentar votar antes de publicar.
   -------------------------------------------------------------------------- */
.ctk-app .ck-enq__previa {
  margin: 12px 0 2px;
  padding: 14px;
  border: 1px solid var(--ck-enq-borda, rgba(255,255,255,.10));
  border-radius: 14px;
  background: var(--ck-enq-fundo, #1f1a33);
  pointer-events: none;
}
.ctk-app .ck-enq__previa-etiqueta {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ck-enq-apagado, #8e7fb4);
}
.ctk-app .ck-enq__previa-pergunta {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ck-enq-texto, #efecf7);
}
.ctk-app .ck-enq__previa-opcao {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin-bottom: 7px;
  padding: 0 12px;
  border: 1px solid var(--ck-enq-borda, rgba(255,255,255,.10));
  border-radius: 11px;
  font-size: 14px;
  color: var(--ck-enq-texto, #efecf7);
}
.ctk-app .ck-enq__previa-opcao:last-child { margin-bottom: 0; }
.ctk-app .ck-enq__previa-bolinha {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px var(--ck-enq-borda-viva, rgba(178,149,255,.42));
}
.ctk-app .ck-enq__previa-vazia { color: var(--ck-enq-apagado, #8e7fb4); }

/* --------------------------------------------------------------------------
   4. O recado depois de publicar
   -------------------------------------------------------------------------- */
.ctk-app .ck-enq__recado {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 0;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.35;
}
.ctk-app .ck-enq__recado--certo {
  background: rgba(122, 65, 240, .16);
  color: var(--ck-enq-texto, #efecf7);
  box-shadow: inset 0 0 0 1px rgba(178, 149, 255, .30);
}
.ctk-app .ck-enq__recado--erro {
  background: rgba(255, 90, 90, .14);
  color: #ffc9c9;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 90, .30);
}
.ctk-app .ck-enq__recado svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   5. A enquete ja publicada

   A marcacao vem de layout/story/entries/options.phtml e nao foi tocada:
   .options e o quadro, .wo_votes cada opcao (com .active na que a pessoa
   escolheu), .result-bar-parent > .result-bar a barra, .answer-vote a
   porcentagem e .total-votes o rodape. O clique continua chamando Wo_VoteUp().
   -------------------------------------------------------------------------- */
.ctk-app .post .options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0;
}

.ctk-app .post .options .wo_votes {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0 !important;
  padding: 8px 13px !important;
  border: 1px solid var(--ck-enq-borda) !important;
  border-radius: 12px !important;
  background: none !important;
  color: var(--ck-enq-texto) !important;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease;
}
.ctk-app .post .options .wo_votes:hover { border-color: var(--ck-enq-borda-viva) !important; }
.ctk-app .post .options .wo_votes.active {
  border-color: var(--ck-enq-borda-viva) !important;
  background: rgba(122, 65, 240, .10) !important;
}

/* o texto da opcao fica acima da barra */
.ctk-app .post .options .poll-option {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  line-height: 1.3;
}
.ctk-app .post .options .poll-option span { display: inline-flex; flex: 0 0 auto; }
.ctk-app .post .options .poll-option svg { width: 19px; height: 19px; }
/* o simbolo azul da plataforma vira o roxo da casa quando e a sua escolha */
.ctk-app .post .options .wo_votes .poll-option svg path { fill: currentColor !important; }
.ctk-app .post .options .wo_votes { color: var(--ck-enq-apagado) !important; }
.ctk-app .post .options .wo_votes .poll-option { color: var(--ck-enq-texto); }
.ctk-app .post .options .wo_votes.active .poll-option { color: var(--ck-enq-roxo-claro); }

/* a barra: fica ATRAS do texto, ocupando o quadro inteiro da opcao.
   A largura em porcentagem continua vindo do servidor, no atributo style. */
.ctk-app .post .options .result-bar-parent {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: inherit;
  overflow: hidden;
}
.ctk-app .post .options .result-bar {
  height: 100% !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(122, 65, 240, .30), rgba(154, 107, 255, .18)) !important;
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
.ctk-app .post .options .wo_votes.active .result-bar {
  background: linear-gradient(90deg, rgba(122, 65, 240, .52), rgba(154, 107, 255, .30)) !important;
}

.ctk-app .post .options .answer-vote {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ck-enq-texto);
}
.ctk-app .post .options .wo_votes.active .answer-vote { color: var(--ck-enq-roxo-claro); }
.ctk-app .post .options .hidden { display: none !important; }

.ctk-app .post .options .total-votes {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ck-enq-apagado);
}
.ctk-app .post .options .total-votes svg { width: 16px; height: 16px; }
.ctk-app .post .options .total-votes svg path { fill: currentColor; }

/* --------------------------------------------------------------------------
   6. Tema claro: so as fichas mudam
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ctk-app {
  --ck-enq-fundo:      #ffffff;
  --ck-enq-campo:      #f6f2ff;
  --ck-enq-borda:      rgba(23, 16, 40, .14);
  --ck-enq-borda-viva: rgba(122, 65, 240, .48);
  --ck-enq-texto:      #1b1430;
  --ck-enq-apagado:    #6b5f85;
  --ck-enq-roxo:       #6528d4;
  --ck-enq-roxo-claro: #6528d4;
}
:root[data-ck-tema="claro"] .ctk-app #poll-form .answers input.form-control {
  background: #f6f2ff !important;
  border-color: rgba(23, 16, 40, .14) !important;
  color: #1b1430 !important;
}
:root[data-ck-tema="claro"] .ctk-app .ck-enq__abas {
  background: #f1ecfd;
  box-shadow: inset 0 0 0 1px rgba(23, 16, 40, .10);
}
:root[data-ck-tema="claro"] .ctk-app .ck-enq__previa { background: #ffffff; }
:root[data-ck-tema="claro"] .ctk-app .post .options .result-bar {
  background: linear-gradient(90deg, rgba(122, 65, 240, .20), rgba(154, 107, 255, .10)) !important;
}
:root[data-ck-tema="claro"] .ctk-app .post .options .wo_votes.active .result-bar {
  background: linear-gradient(90deg, rgba(122, 65, 240, .34), rgba(154, 107, 255, .18)) !important;
}
:root[data-ck-tema="claro"] .ctk-app .ck-enq__recado--erro { background: rgba(198, 40, 40, .10); color: #8c1d1d; }

@media (prefers-reduced-motion: reduce) {
  .ctk-app .ck-enq__aba,
  .ctk-app .post .options .wo_votes,
  .ctk-app .post .options .result-bar { transition: none; }
}