/* ==========================================================================
   CIUTEK - Modo claro
   Tudo aqui esta preso a :root[data-ck-tema="claro"]. O modo escuro nao e
   tocado por nenhuma regra deste arquivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Apelido que faltava
   A paleta define --ck-superficie, mas parte do codigo novo pede
   --ck-superficie-1. Sem este apelido, essas regras caiam no valor de
   emergencia escrito na mao e nao acompanhavam o tema.
   -------------------------------------------------------------------------- */
:root{
  --ck-superficie-1: var(--ck-superficie);
  /* roxo de texto: no escuro continua o mesmo tom claro de sempre */
  --ck-acento-texto: var(--ck-roxo-300);
  --ck-acento-link: var(--ck-roxo-400);
}

/* --------------------------------------------------------------------------
   1. Tokens do modo claro
   O roxo claro da identidade e feito para fundo escuro; sobre branco ele
   some. No claro o texto usa um roxo profundo, medido em 7:1 no fundo da
   pagina e 6:1 na superficie mais funda.
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"]{
  --ck-superficie-1:#ffffff;
  --ck-acento-texto:#5f2bd0;
  --ck-acento-link:#5f2bd0;
  --ck-vidro-fundo:rgba(255,255,255,.86);
  --ck-vidro-borda:rgba(38,13,85,.10);
}

/* --------------------------------------------------------------------------
   2. Textos e links roxos
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ctk-app .ck-conta__profissao,
:root[data-ck-tema="claro"] .ctk-app .ck-conta__link,
:root[data-ck-tema="claro"] .ctk-app .ck-conta__maisbio,
:root[data-ck-tema="claro"] .ctk-app .ctk-vitrine__editar,
:root[data-ck-tema="claro"] .ctk-app .ctk-vitrine__inicial,
:root[data-ck-tema="claro"] .ctk-app .ck-menu-secoes a:hover,
:root[data-ck-tema="claro"] .ctk-app .ck-conta__numero:hover b{
  color:var(--ck-acento-texto) !important;
}
:root[data-ck-tema="claro"] .ctk-app .ctk-vitrine__editar{
  background:var(--ck-superficie-3);
}

/* --------------------------------------------------------------------------
   3. Cabecalho
   O tema base pinta a barra e o campo de busca com cores de noite. No claro
   isso virava texto branco em fundo branco e uma busca preta.
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000{
  background:var(--ck-vidro-fundo) !important;
  border-bottom:1px solid var(--ck-borda);
  backdrop-filter:blur(var(--ck-desfoque, 18px));
  -webkit-backdrop-filter:blur(var(--ck-desfoque, 18px));
}

/* campo de busca */
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .search-input,
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 input.form-control{
  background:var(--ck-superficie-2) !important;
  color:var(--ck-texto) !important;
  border:1px solid var(--ck-borda) !important;
}
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .search-input::placeholder,
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 input.form-control::placeholder{
  color:var(--ck-texto-fraco) !important;
  opacity:1;
}

/* icones e rotulos do cabecalho: eram brancos, sumiam no fundo claro */
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .navbar-nav > li > a,
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .dropdown-toggle,
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .brand,
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .ck-icone-invisivel{
  color:var(--ck-texto) !important;
}
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 svg{
  stroke:currentColor;
}

/* a pilha "Inicio": fundo branco translucido sobre branco nao aparecia */
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .navbar-nav > li > a:not(.btn-main){
  background:transparent !important;
}
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .navbar-nav > li > a:hover,
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .navbar-nav > li.active > a{
  background:var(--ck-superficie-2) !important;
  color:var(--ck-acento-texto) !important;
}
/* o botao Criar mantem o roxo cheio, com texto branco */
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .btn-main,
:root[data-ck-tema="claro"] .ctk-app .header-fixed1000 .btn-main *{
  color:#fff !important;
}

/* --------------------------------------------------------------------------
   4. Menus suspensos e cartoes flutuantes
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ctk-app .dropdown-menu{
  background:var(--ck-superficie-1) !important;
  border:1px solid var(--ck-borda) !important;
  box-shadow:0 24px 48px -28px rgba(38,13,85,.35) !important;
  color:var(--ck-texto) !important;
}
:root[data-ck-tema="claro"] .ctk-app .dropdown-menu a,
:root[data-ck-tema="claro"] .ctk-app .dropdown-menu li,
:root[data-ck-tema="claro"] .ctk-app .dropdown-menu strong,
:root[data-ck-tema="claro"] .ctk-app .dropdown-menu span{
  color:var(--ck-texto) !important;
}
:root[data-ck-tema="claro"] .ctk-app .dropdown-menu a:hover{
  background:var(--ck-superficie-2) !important;
}

/* --------------------------------------------------------------------------
   5. Barra inferior do celular no modo claro
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ctk-app .ck-barra{
  background:var(--ck-vidro-fundo);
  border-top:1px solid var(--ck-borda);
}
:root[data-ck-tema="claro"] .ctk-app .ck-barra__lista > li > a{
  color:var(--ck-texto) !important;
}
:root[data-ck-tema="claro"] .ctk-app .ck-barra__lista > li > a:hover,
:root[data-ck-tema="claro"] .ctk-app .ck-barra__lista > li.open > a{
  color:var(--ck-acento-texto) !important;
}

/* --------------------------------------------------------------------------
   6. Aviso de medidas e menu de secoes
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ck-medida-caixa,
:root[data-ck-tema="claro"] .ctk-app .ck-menu-secoes{
  background:var(--ck-superficie-1);
  border-color:var(--ck-borda);
  color:var(--ck-texto);
  box-shadow:0 30px 70px -34px rgba(38,13,85,.4);
}
:root[data-ck-tema="claro"] .ck-medida-fundo{
  background:rgba(28,20,48,.44);
}

/* --------------------------------------------------------------------------
   7. Anel dos destaques e moldura da vitrine
   No claro o anel branco sobre branco desaparecia.
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ctk-app .ck-destaque__anel{
  box-shadow:
    0 0 0 2px var(--ck-fundo),
    0 0 0 4px rgba(38,13,85,.18);
}
:root[data-ck-tema="claro"] .ctk-app .ck-destaque:hover .ck-destaque__anel{
  box-shadow:
    0 0 0 2px var(--ck-fundo),
    0 0 0 4px var(--ck-acento-texto);
}
:root[data-ck-tema="claro"] .ctk-app .ctk-vitrine__quadro{
  box-shadow:
    0 0 0 1px var(--ck-borda),
    0 10px 24px -20px rgba(38,13,85,.45);
}
:root[data-ck-tema="claro"] .ctk-app a.ctk-vitrine__item:hover .ctk-vitrine__quadro{
  box-shadow:
    0 0 0 1px var(--ck-acento-texto),
    0 16px 30px -20px rgba(38,13,85,.5);
}

/* --------------------------------------------------------------------------
   8. Esqueleto de carregamento
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ctk-app .ck-grade__celula.ck-esqueleto,
:root[data-ck-tema="claro"] .ctk-app .ck-grade__celula{
  background:var(--ck-superficie-2);
}

/* --------------------------------------------------------------------------
   9. Botoes do sistema no claro
   .btn-default vinha com fundo branco translucido, texto branco e borda
   branca: no fundo claro o botao sumia por inteiro.
   -------------------------------------------------------------------------- */
:root[data-ck-tema="claro"] .ctk-app .ck-conta__acoes .btn-default,
:root[data-ck-tema="claro"] .ctk-app .ck-conta__acoes .btn-default *{
  color:var(--ck-texto) !important;
}
:root[data-ck-tema="claro"] .ctk-app .ck-conta__acoes .btn-default{
  background:var(--ck-superficie-2) !important;
  border:1px solid var(--ck-borda) !important;
}
:root[data-ck-tema="claro"] .ctk-app .ck-conta__acoes .btn-default:hover{
  background:var(--ck-superficie-3) !important;
  border-color:var(--ck-acento-texto) !important;
}
/* o botao roxo cheio (Seguir) mantem texto branco */
:root[data-ck-tema="claro"] .ctk-app .ck-conta__acoes .wo_follow_btn,
:root[data-ck-tema="claro"] .ctk-app .ck-conta__acoes .wo_follow_btn *{
  color:#fff !important;
}

/* --------------------------------------------------------------------------
   10. Sobras do feed no claro
   -------------------------------------------------------------------------- */
/* cinzas fixos do tema base, longe do minimo de leitura no fundo claro */
:root[data-ck-tema="claro"] .ctk-app .no-activities,
:root[data-ck-tema="claro"] .ctk-app .text-muted,
:root[data-ck-tema="claro"] .ctk-app .footer-wrapper-sidebar a{
  color:var(--ck-texto-fraco) !important;
}

/* o nome sobre a miniatura do story e branco de proposito; no claro ele
   precisa de um vinco escuro para nao sumir quando a foto e clara */
:root[data-ck-tema="claro"] .ctk-app .status-list p,
:root[data-ck-tema="claro"] .ctk-app .see_all_stories p{
  text-shadow:0 1px 3px rgba(12,8,24,.85), 0 0 10px rgba(12,8,24,.5);
}

/* rodape lateral: mesma regra do rodape principal, so para quem ja entrou */
body.ck-logado .footer-wrapper-sidebar{
  display:none !important;
}