/* ==========================================================================
   CIUTEK - Navegacao
   Computador: trilho proprio, fixo a esquerda, em toda pagina.
   Celular:    barra fixa embaixo, cinco opcoes, nenhuma barra em cima.
   ========================================================================== */

:root{
  --ck-barra-altura:58px;
  --ck-trilho-largura:76px;
  --ck-trilho-icone:24px;
  --ck-cabecalho:50px;
}

/* ==========================================================================
   1. CELULAR
   ========================================================================== */
@media (max-width:767px){
  .ctk-app .navbar-fixed-top,
  .ctk-app .header-fixed1000{ display:none !important; }
  .ctk-app .content-container{ padding-top:0 !important; }
  .ctk-app .col-md-2.leftcol,
  .ctk-app .theiaStickySidebar{ display:none !important; }

  body.ck-com-barra{
    padding-bottom:calc(var(--ck-barra-altura) + var(--ck-seguro-baixo, 0px) + 10px) !important;
  }
}

.ctk-app .ck-barra{
  position:fixed; left:0; right:0; bottom:0;
  z-index:var(--ck-z-nav, 400);
  height:calc(var(--ck-barra-altura) + var(--ck-seguro-baixo, 0px));
  padding-bottom:var(--ck-seguro-baixo, 0px);
  background:var(--ck-vidro-fundo, rgba(16,12,28,.92));
  backdrop-filter:blur(var(--ck-desfoque, 18px));
  -webkit-backdrop-filter:blur(var(--ck-desfoque, 18px));
  border-top:1px solid var(--ck-borda, rgba(255,255,255,.12));
}
.ctk-app .ck-barra__lista{
  display:flex; align-items:center; justify-content:space-around;
  height:var(--ck-barra-altura);
  margin:0; padding:0; list-style:none;
}
.ctk-app .ck-barra__lista > li{
  flex:1 1 0; display:flex; align-items:center; justify-content:center;
  position:relative; min-width:0;
  float:none !important; margin:0 !important; padding:0 !important;
  border:0 !important; background:none !important;
}
.ctk-app .ck-barra__lista > li > a{
  position:relative;
  display:flex !important; align-items:center; justify-content:center;
  width:100%; height:var(--ck-barra-altura);
  padding:0 !important; margin:0 !important; border:0 !important;
  background:none !important;
  color:var(--ck-texto, #efeaf8) !important;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--ck-tempo-1, 100ms) ease,
             color var(--ck-tempo-1, 100ms) ease;
}
.ctk-app .ck-barra__lista > li > a:active{ transform:scale(.9); }
.ctk-app .ck-barra__lista > li > a:hover,
.ctk-app .ck-barra__lista > li.open > a,
.ctk-app .ck-barra__lista > li > a.ck-ativo{
  background:none !important;
  color:var(--ck-acento-texto, #b295ff) !important;
}
.ctk-app .ck-barra__lista > li > a.ck-ativo::before{
  content:""; position:absolute; top:7px; left:50%;
  width:18px; height:3px; margin-left:-9px;
  border-radius:999px; background:var(--ck-roxo-500, #7a41f0);
}
.ctk-app .ck-barra__lista svg{ width:24px !important; height:24px !important; }
.ctk-app .ck-barra__lista img{
  width:26px !important; height:26px !important;
  border-radius:999px; object-fit:cover;
}
.ctk-app .ck-barra__lista .wow_hdr_txt,
.ctk-app .ck-barra__lista .caret,
.ctk-app .ck-barra__lista .ck-trilho__nome{ display:none !important; }
.ctk-app .ck-barra__lista .notification-counter,
.ctk-app .ck-barra__lista .badge{
  position:absolute; top:8px; left:50%; transform:translateX(2px);
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; font-size:10px; line-height:16px; text-align:center;
}
.ctk-app .ck-barra__lista .dropdown-menu{
  position:fixed !important; top:auto !important;
  bottom:calc(var(--ck-barra-altura) + var(--ck-seguro-baixo, 0px)) !important;
  left:8px !important; right:8px !important;
  width:auto !important; max-width:none !important;
  max-height:min(70vh, 520px); overflow-y:auto;
  margin:0 0 8px !important;
  border-radius:var(--ck-raio-3, 16px) !important;
  transform:none !important;
}

/* ==========================================================================
   2. COMPUTADOR - trilho proprio a esquerda
   ========================================================================== */
.ctk-app .ck-trilho{ display:none; }

@media (min-width:768px){
  .ctk-app .ck-barra{ display:none !important; }
  body.ck-com-barra{ padding-bottom:0 !important; }

  .ctk-app .ck-trilho{
    display:block;
    position:fixed;
    left:0;
    top:var(--ck-cabecalho);
    bottom:0;
    width:var(--ck-trilho-largura);
    z-index:var(--ck-z-nav, 400);
    padding:10px 0 16px;
    box-sizing:border-box;
    overflow-y:auto;
    overflow-x:visible;
    background:var(--ck-superficie-1, #171327);
    border-right:1px solid var(--ck-borda, rgba(255,255,255,.10));
    scrollbar-width:thin;
  }
  .ctk-app .ck-trilho::-webkit-scrollbar{ width:6px; }
  .ctk-app .ck-trilho::-webkit-scrollbar-thumb{
    background:var(--ck-superficie-3, rgba(255,255,255,.14));
    border-radius:999px;
  }

  .ctk-app .ck-trilho ul{ list-style:none; margin:0; padding:0; }
  .ctk-app .ck-trilho li{
    display:block; margin:0; padding:0; border:0; float:none;
    position:relative;
  }

  /* 2.1 cada item e um quadrado com o icone no centro */
  .ctk-app .ck-trilho a{
    position:relative;
    display:flex !important;
    align-items:center; justify-content:center;
    width:calc(var(--ck-trilho-largura) - 16px);
    min-height:48px; height:48px;
    margin:2px 8px; padding:0 !important;
    border-radius:14px;
    color:var(--ck-texto, inherit) !important;
    text-decoration:none;
    line-height:1 !important;
    box-sizing:border-box;
    transition:background var(--ck-tempo-1, 100ms) ease,
               transform var(--ck-tempo-1, 100ms) ease;
  }
  .ctk-app .ck-trilho a svg{
    width:var(--ck-trilho-icone) !important;
    height:var(--ck-trilho-icone) !important;
    flex:0 0 auto;
  }
  .ctk-app .ck-trilho a img{
    width:var(--ck-trilho-icone) !important;
    height:var(--ck-trilho-icone) !important;
    object-fit:contain;
  }
  .ctk-app .ck-trilho a i,
  .ctk-app .ck-trilho a .fa{ font-size:20px !important; line-height:1 !important; }

  .ctk-app .ck-trilho a:hover{
    background:var(--ck-superficie-2, rgba(255,255,255,.07)) !important;
    transform:translateY(-1px);
  }
  .ctk-app .ck-trilho a:active{ transform:translateY(0) scale(.96); }
  .ctk-app .ck-trilho a:focus-visible{
    outline:2px solid var(--ck-roxo-400, #9268fb);
    outline-offset:2px;
  }

  /* 2.2 item ativo */
  .ctk-app .ck-trilho a.ck-ativo{
    background:var(--ck-superficie-3, rgba(255,255,255,.12)) !important;
    color:var(--ck-acento-texto, #b295ff) !important;
  }
  .ctk-app .ck-trilho a.ck-ativo::before{
    content:""; position:absolute; left:-8px; top:50%;
    width:3px; height:22px; margin-top:-11px;
    border-radius:0 3px 3px 0;
    background:var(--ck-roxo-500, #7a41f0);
  }

  /* 2.3 o nome sai da tela pelo caminho acessivel */
  .ctk-app .ck-trilho .ck-trilho__nome{
    position:absolute !important;
    width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
    white-space:nowrap; border:0;
  }
  .ctk-app .ck-trilho .caret,
  .ctk-app .ck-trilho .wow_hdr_txt{ display:none !important; }

  /* 2.4 bloco do sistema, separado do menu de conteudo */
  .ctk-app .ck-trilho__sistema{
    padding-bottom:8px !important;
    margin-bottom:8px !important;
    border-bottom:1px solid var(--ck-borda, rgba(255,255,255,.10));
  }
  .ctk-app .ck-trilho__sistema img{ border-radius:999px; object-fit:cover; }
  .ctk-app .ck-trilho .notification-counter,
  .ctk-app .ck-trilho .badge{
    position:absolute; top:4px; right:12px;
    min-width:16px; height:16px; padding:0 4px;
    border-radius:999px;
    font-size:10px; line-height:16px; text-align:center;
    pointer-events:none;
  }
  /* itens sem ancora propria (idioma, trocar conta) */
  .ctk-app .ck-trilho__sistema > li{
    display:flex; align-items:center; justify-content:center;
    min-height:48px;
  }
  .ctk-app .ck-trilho__sistema > li > *{ max-width:100%; }

  /* 2.5 menus abrem ao lado do trilho */
  .ctk-app .ck-trilho .dropdown-menu{
    position:fixed !important;
    left:calc(var(--ck-trilho-largura) + 12px) !important;
    right:auto !important; top:auto !important;
    margin:0 !important;
    max-height:min(76vh, 620px); overflow-y:auto;
    border-radius:var(--ck-raio-3, 16px) !important;
    transform:none !important;
  }

  /* 2.6 a pagina abre espaco para o trilho */
  body.ck-com-trilho .content-container{
    padding-left:calc(var(--ck-trilho-largura) + 12px);
  }
  /* a coluna do tema fica vazia depois do emprestimo */
  body.ck-lateral-vazia .col-md-2.leftcol,
  body.ck-lateral-vazia .theiaStickySidebar{
    display:none !important;
  }
  /* nada pode sobrar solto no canto direito do cabecalho */
  body.ck-com-trilho .header-fixed1000 #head_menu_rght{ display:none !important; }
}

/* ==========================================================================
   3. Etiqueta com o nome (nao empurra nada: sai do fluxo)
   ========================================================================== */
.ck-dica{
  position:fixed;
  z-index:var(--ck-z-flutuante, 700);
  transform:translateY(-50%);
  padding:7px 12px;
  border-radius:10px;
  background:var(--ck-superficie-1, #171327);
  color:var(--ck-texto, #efecf7);
  border:1px solid var(--ck-borda, rgba(255,255,255,.14));
  box-shadow:0 16px 34px -20px rgba(0,0,0,.9);
  font-size:13px; font-weight:600;
  white-space:nowrap; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .ck-dica{ animation:ck-dica-entra 140ms ease both; }
}
@keyframes ck-dica-entra{
  from{ opacity:0; transform:translateY(-50%) translateX(-4px); }
  to{ opacity:1; transform:translateY(-50%) translateX(0); }
}

/* ==========================================================================
   4. Icone proprio da Ciutek
   O tema esconde svg dentro dos itens de mensagens, notificacoes e
   solicitacoes quando eles saem do cabecalho. Esta classe e so do desenho
   da Ciutek, entao pode se impor sem afetar os do tema.
   ========================================================================== */
.ctk-app svg.ck-icone{
  display:block !important;
  visibility:visible !important;
  width:24px !important;
  height:24px !important;
  color:inherit;
  stroke:currentColor;
  opacity:1 !important;
}

/* =================================================================
   31. Icones da Ciutek nos itens da plataforma
   O icone antigo do tema nao e apagado, so tirado de vista: ainda ha
   script da plataforma que procura por ele no DOM.
   ================================================================= */
.ctk-app .ck-icone-tema{
  display:none!important;
}

/* Um item com icone e texto: o icone na frente, alinhado ao texto. */
.ctk-app a.ck-item-conta,
.ctk-app a.ck-item-lista{
  display:flex!important;
  align-items:center;
  gap:10px;
}
.ctk-app a.ck-item-conta > svg.ck-i,
.ctk-app a.ck-item-lista > svg.ck-i{
  flex:0 0 auto;
}

/* Controles da caixa de publicacao */
.ctk-app .ck-com-icone{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ctk-app label.ck-valor{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

/* =================================================================
   32. Painel do item "Mais" no trilho
   Sai por cima da pagina, ancorado ao lado do trilho, sem empurrar
   nada e sem passar do fim da tela.
   ================================================================= */
.ctk-app .ck-mais{ position:relative; }

.ctk-app .ck-mais__painel{
  position:fixed;
  left:calc(var(--ck-trilho-largura) + 10px);
  bottom:16px;
  width:250px;
  max-height:min(70vh, 560px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px;
  border-radius:16px;
  background:var(--ck-superficie-2,#1f1a33);
  border:1px solid var(--ck-borda,rgba(255,255,255,.10));
  box-shadow:0 18px 48px rgba(9,3,24,.5);
  z-index:1250;
}
:root[data-ck-tema="claro"] .ctk-app .ck-mais__painel{
  background:#ffffff;
  border-color:rgba(38,13,85,.12);
  box-shadow:0 18px 48px rgba(38,13,85,.16);
}
.ctk-app .ck-mais__painel[hidden]{ display:none!important; }

.ctk-app .ck-mais__painel ul{
  list-style:none;
  margin:0;
  padding:0;
}
.ctk-app .ck-mais__painel li{ display:block; width:auto; }
.ctk-app .ck-mais__painel a{
  display:flex!important;
  align-items:center;
  gap:10px;
  width:auto!important;
  min-height:40px;
  height:auto!important;
  margin:1px 0!important;
  padding:0 10px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.25;
  text-align:left;
  color:var(--ck-texto,#efecf7);
  justify-content:flex-start!important;
}
:root[data-ck-tema="claro"] .ctk-app .ck-mais__painel a{ color:#241143; }
.ctk-app .ck-mais__painel a:hover{ background:var(--ck-superficie-3,#292140); }
:root[data-ck-tema="claro"] .ctk-app .ck-mais__painel a:hover{ background:#f1ecfd; }

/* Dentro do painel o nome volta a aparecer: la ele tem espaco. */
.ctk-app .ck-mais__painel .ck-trilho__nome{
  position:static!important;
  width:auto;height:auto;margin:0;
  overflow:visible;clip:auto;clip-path:none;
}

/* O item "Mais" sem nada dentro nao aparece. */
.ctk-app .ck-mais[hidden]{ display:none!important; }

/* =================================================================
   33. Itens do trilho que sao so recipiente de menu
   Perdem a altura, mas continuam no DOM e fora de qualquer ancestral
   escondido: o menu que eles guardam ainda precisa poder abrir.
   ================================================================= */
.ctk-app .ck-trilho .ck-trilho__so-menu{
  display:block!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible;
}

/* O botao do idioma segue a mesma caixa dos demais itens do trilho. */
@media (min-width:768px){
  .ctk-app .ck-trilho > ul > li > button{
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:calc(var(--ck-trilho-largura) - 16px);
    min-height:48px;
    height:48px;
    margin:2px 8px;
    border-radius:14px;
  }
}

/* =================================================================
   34. Area de toque na barra de baixo
   Inicio e Busca sao itens da Ciutek e ja ocupavam a barra inteira.
   Mensagens, Notificacoes e Perfil vem do tema como li.dropdown, e la
   a ancora tinha so 24px de altura: o dedo acertava um terco do que
   parecia clicavel. Aqui os cinco passam a ter a mesma caixa.
   ================================================================= */
@media (max-width:767px){
  .ctk-app .ck-barra > ul > li{
    display:flex!important;
    align-items:stretch;
    min-height:var(--ck-barra-altura,58px);
  }
  .ctk-app .ck-barra > ul > li > a,
  .ctk-app .ck-barra > ul > li > button{
    display:flex!important;
    align-items:center;
    justify-content:center;
    flex:1 1 auto;
    min-height:var(--ck-barra-altura,58px);
    height:auto!important;
    padding:0!important;
    margin:0!important;
    line-height:1!important;
  }
  /* o menu que esses itens abrem nao deve herdar a esticada */
  .ctk-app .ck-barra > ul > li .dropdown-menu a{
    min-height:40px;
    flex:0 0 auto;
  }
}


/* ==========================================================================
   Barra de baixo: nome embaixo de cada simbolo, e o claro/escuro
   A busca saiu daqui - ela agora mora no cabecalho, em cima.
   ========================================================================== */
:root { --ck-barra-altura: 64px; }

.ctk-app .ck-barra__lista > li > a {
  flex-direction: column;
  gap: 3px;
}
.ctk-app .ck-barra__lista > li > a[data-ck-nome]::after {
  content: attr(data-ck-nome);
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .01em;
  font-weight: 500;
  opacity: .8;
}
.ctk-app .ck-barra__lista > li > a.ck-ativo::after { opacity: 1; }
.ctk-app .ck-barra__lista > li > a.ck-ativo::before { top: 3px; }
.ctk-app .ck-barra__lista .notification-counter,
.ctk-app .ck-barra__lista .badge { top: 4px; }

/* a busca subiu para o cabecalho; o botao daqui viraria repeticao */
.ctk-app .ck-barra__lista > li.wow_new_search_bbtn { display: none !important; }

.ctk-app .ck-tema-item > a svg {
  transition: transform var(--ck-tempo-2, 180ms) ease;
}
.ctk-app .ck-tema-item > a:active svg { transform: rotate(-18deg); }