/* ··························································································
   CIUTEK 1 - VELVET NEXUS | ciutek-entrada.css

   A primeira tela do Ciutek: entrada, login, cadastro, recuperacao,
   nova senha e confirmacao de e-mail.

   O formulario nao foi tocado. Os campos, os nomes, os ids e o envio
   por ajax continuam exatamente como a plataforma escreveu - e o que
   garante que login, sessao, CSRF e limite de tentativas seguem
   funcionando. Aqui muda so a pele em volta.
   ·························································································· */

/* ------------------------------------------------------------
   1. O PALCO
   ------------------------------------------------------------ */
body.ctk-app .wrapper > .login {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 55fr 45fr;
  background: var(--ck-fundo, #0d0a16);
  overflow: hidden;
}
/* a luz que costura os dois lados, para a tela nao parecer cortada */
body.ctk-app .wrapper > .login::before {
  content: "";
  position: absolute;
  inset: -20% 30% -20% -10%;
  background: radial-gradient(60% 50% at 55% 45%, rgba(122, 65, 240, .30), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------
   2. O LADO DA ARTE
   ------------------------------------------------------------ */
body.ctk-app .login .login_left_combo_parent {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: none !important;
}
/* o SVG decorativo antigo da plataforma sai de cena */
/* o grafico decorativo antigo (793x1024, roxo chapado) e filho de
   .login_left_combo, e nao do pai - por isso continuava aparecendo
   como um bloco roxo no topo do celular. O svg de 15px do seletor
   de idioma fica de fora desta regra de proposito. */
body.ctk-app .login .login_left_combo_parent > svg,
body.ctk-app .login .login_left_combo > svg { display: none !important; }
body.ctk-app .login .login_left_combo {
  position: relative;
  width: 100%;
  max-width: 560px;
  text-align: left;
  background: none !important;
}
body.ctk-app .login .login_left_combo .logo img {
  height: 38px;
  width: auto;
  margin-bottom: 28px;
}
body.ctk-app .login .ck-entrada__olho {
  display: inline-block;
  font-size: var(--ck-t-legenda, 12px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ck-roxo-300, #b295ff);
  margin-bottom: 14px;
}
body.ctk-app .login .login_left_combo h1 {
  font-family: var(--ck-fonte-titulo);
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.08;
  font-weight: var(--ck-p-destaque, 680);
  color: var(--ck-texto, #efecf7);
  margin: 0 0 16px;
  text-wrap: balance;
}
body.ctk-app .login .login_left_combo h1 .ck-brilha {
  background: linear-gradient(100deg, #cfbcff, #7a41f0 55%, #6fc4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.ctk-app .login .login_left_combo > p {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--ck-texto-2, #b9a8dd);
  margin: 0 0 34px;
  max-width: 46ch;
}
/* a imagem antiga nao aparece em momento algum */
body.ctk-app .login .login_left_combo .img,
body.ctk-app .login .login_left_combo .fadeInUp.img { display: none !important; }
/* ------------------------------------------------------------
   3. A ARTE NEXUS

   Todo o movimento vive aqui. Nada e obrigatorio: a secao 9
   desliga tudo de uma vez quando o aparelho pede menos movimento,
   e a arte continua inteira, so parada.
   ------------------------------------------------------------ */
body.ctk-app .ck-nexus {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1 / 1;
  margin: 0 0 6px;
  --ck-nx-x: 0deg;
  --ck-nx-y: 0deg;
  perspective: 900px;
}
body.ctk-app .ck-nexus__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotateX(var(--ck-nx-x)) rotateY(var(--ck-nx-y));
  transition: transform 400ms cubic-bezier(.22, .61, .36, 1);
}

/* camadas de vidro */
body.ctk-app .ck-nexus__vidro {
  fill: rgba(122, 65, 240, .05);
  stroke: rgba(178, 149, 255, .16);
  stroke-width: 1;
}
body.ctk-app .ck-nexus__vidro--2 { fill: rgba(122, 65, 240, .07); }
body.ctk-app .ck-nexus__halo { animation: ck-nx-respirar 9s ease-in-out infinite; }

/* orbitas */
body.ctk-app .ck-nexus__aro {
  fill: none;
  stroke: url(#ckAro);
  stroke-width: 1.4;
  transform-origin: 300px 300px;
}
body.ctk-app .ck-nexus__aro--1 { transform: rotate(0deg);   animation: ck-nx-girar 46s linear infinite; }
body.ctk-app .ck-nexus__aro--2 { transform: rotate(60deg);  animation: ck-nx-girar 62s linear infinite reverse; }
body.ctk-app .ck-nexus__aro--3 { transform: rotate(120deg); animation: ck-nx-girar 78s linear infinite; }

/* conexoes: a luz percorre o fio */
body.ctk-app .ck-nexus__fio {
  stroke: url(#ckFio);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 26 300;
  stroke-dashoffset: 326;
  animation: ck-nx-correr 7s linear infinite;
}
body.ctk-app .ck-nexus__fio--1 { animation-duration: 9s;  animation-delay: -2s; }
body.ctk-app .ck-nexus__fio--2 { animation-duration: 11s; animation-delay: -5s; }
body.ctk-app .ck-nexus__fio--3 { animation-duration: 8s;  animation-delay: -3.5s; }

/* o nucleo */
/* sem filtro de desfoque em elemento animado: feGaussianBlur num
   objeto que se move obriga o navegador a refazer o borrao a cada
   quadro, e era o que travava a pagina em aparelho simples. O brilho
   agora vem do proprio gradiente e do halo, que sao estaticos. */
body.ctk-app .ck-nexus__nucleo { filter: none; }
body.ctk-app .ck-nexus__pulso {
  fill: none;
  stroke: rgba(178, 149, 255, .5);
  stroke-width: 1.2;
  transform-origin: 300px 300px;
  animation: ck-nx-pulsar 5.5s ease-out infinite;
}

/* as pessoas */
body.ctk-app .ck-nexus__no {
  fill: #cfbcff;
  animation: ck-nx-piscar 6s ease-in-out infinite;
}
body.ctk-app .ck-nexus__no--1 { fill: #b295ff; animation-delay: -1.2s; }
body.ctk-app .ck-nexus__no--2 { fill: #6fc4ff; animation-delay: -2.4s; }
body.ctk-app .ck-nexus__no--3 { fill: #e7dfff; animation-delay: -3.6s; }
body.ctk-app .ck-nexus__no--4 { fill: #9268fb; animation-delay: -4.8s; }

@keyframes ck-nx-girar   { to { transform: rotate(360deg); } }
@keyframes ck-nx-correr  { to { stroke-dashoffset: 0; } }
@keyframes ck-nx-respirar{ 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes ck-nx-pulsar  { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(2.3); opacity: 0; } }
@keyframes ck-nx-piscar  { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* ------------------------------------------------------------
   4. O PAINEL DO FORMULARIO - vidro fosco
   ------------------------------------------------------------ */
body.ctk-app .login .login_right_combo,
body.ctk-app .login .login_reg_combo,
body.ctk-app .login > .container,
body.ctk-app .login .login_page_form {
  position: relative;
  z-index: 2;
}
body.ctk-app .login .ck-entrada__painel {
  width: min(100%, 460px);
  min-width: 0;
  margin: 0 auto;
  padding: 34px 30px;
  border-radius: 22px;
  background: var(--ck-vidro-fundo, rgba(31, 26, 51, .62));
  border: 1px solid var(--ck-vidro-borda, rgba(255, 255, 255, .12));
  box-shadow: 0 30px 80px rgba(6, 4, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
body.ctk-app .login .ck-entrada__titulo {
  font-family: var(--ck-fonte-titulo);
  font-size: var(--ck-t-pagina, 28px);
  line-height: 1.2;
  font-weight: var(--ck-p-titulo, 650);
  color: var(--ck-texto, #efecf7);
  margin: 0 0 8px;
}
body.ctk-app .login .ck-entrada__apoio {
  font-size: var(--ck-t-apoio, 14px);
  line-height: 1.5;
  color: var(--ck-texto-3, #8e7fb4);
  margin: 0 0 26px;
}

/* ------------------------------------------------------------
   5. CAMPOS
   ------------------------------------------------------------ */
body.ctk-app .login .form-group { margin-bottom: 16px; }
body.ctk-app .login label {
  display: block;
  font-size: var(--ck-t-apoio, 14px);
  font-weight: 500;
  color: var(--ck-texto-2, #b9a8dd);
  margin-bottom: 7px;
}
body.ctk-app .login input[type="text"],
body.ctk-app .login input[type="email"],
body.ctk-app .login input[type="password"],
body.ctk-app .login input[type="tel"],
body.ctk-app .login input[type="number"]:not([hidden]),
body.ctk-app .login select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 13px;
  background: rgba(13, 10, 22, .55) !important;
  border: 1px solid var(--ck-borda, rgba(255, 255, 255, .10)) !important;
  color: var(--ck-texto, #efecf7) !important;
  font-size: 15px;
  box-shadow: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
body.ctk-app .login input:focus,
body.ctk-app .login select:focus {
  border-color: var(--ck-foco, #b295ff) !important;
  box-shadow: 0 0 0 3px rgba(122, 65, 240, .26) !important;
  outline: none !important;
}
body.ctk-app .login input::placeholder { color: var(--ck-texto-3, #8e7fb4); }
/* o preenchimento automatico do navegador nao pode voltar ao branco */
body.ctk-app .login input:-webkit-autofill,
body.ctk-app .login input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ck-texto, #efecf7);
  -webkit-box-shadow: 0 0 0 1000px #16112a inset;
  caret-color: var(--ck-texto, #efecf7);
}

/* olho de mostrar a senha */
body.ctk-app .login .ck-entrada__campo { position: relative; }
body.ctk-app .login .ck-entrada__olhinho {
  position: absolute;
  right: 6px;
  bottom: 2px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 11px;
  color: var(--ck-texto-3, #8e7fb4);
  cursor: pointer;
}
body.ctk-app .login .ck-entrada__olhinho:hover { color: var(--ck-roxo-300, #b295ff); }
body.ctk-app .login .ck-entrada__olhinho:focus-visible {
  outline: 2px solid var(--ck-foco, #b295ff);
  outline-offset: 2px;
}
/* ------------------------------------------------------------
   6. BOTOES
   ------------------------------------------------------------ */
body.ctk-app .login .btn-main,
body.ctk-app .login button[type="submit"] {
  position: relative;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 14px;
  font-family: var(--ck-fonte-texto);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #7a41f0 0%, #9268fb 55%, #6528d4 100%);
  box-shadow: 0 12px 26px rgba(101, 40, 212, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  overflow: hidden;
  transition: filter 160ms ease, transform 100ms ease, box-shadow 160ms ease;
}
/* o brilho de cima, que da o volume sem atrapalhar a leitura */
body.ctk-app .login .btn-main::before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), transparent);
  pointer-events: none;
}
body.ctk-app .login .btn-main:hover { filter: brightness(1.07); }
body.ctk-app .login .btn-main:active { transform: translateY(1px) scale(.99); }
body.ctk-app .login .btn-main:focus-visible {
  outline: 2px solid var(--ck-foco, #b295ff);
  outline-offset: 3px;
}
body.ctk-app .login .btn-main[disabled],
body.ctk-app .login .btn-main.ck-ocupado { filter: saturate(.7) brightness(.9); cursor: progress; }

/* ------------------------------------------------------------
   7. LINHAS DE APOIO E RECADOS
   ------------------------------------------------------------ */
body.ctk-app .login .ck-entrada__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 22px;
  font-size: var(--ck-t-apoio, 14px);
}
body.ctk-app .login .ck-entrada__linha label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  min-height: 44px;
  color: var(--ck-texto-2, #b9a8dd);
  cursor: pointer;
}
body.ctk-app .login input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ck-roxo-500, #7a41f0);
}
body.ctk-app .login a.main,
body.ctk-app .login a.dec {
  color: var(--ck-roxo-300, #b295ff);
  text-decoration: none;
  font-weight: 600;
}
body.ctk-app .login a.main:hover { text-decoration: underline; }
body.ctk-app .login .ck-entrada__rodape {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ck-borda, rgba(255, 255, 255, .10));
  text-align: center;
  font-size: var(--ck-t-apoio, 14px);
  color: var(--ck-texto-3, #8e7fb4);
}
body.ctk-app .login .ck-entrada__recado {
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: var(--ck-t-apoio, 14px);
  line-height: 1.45;
  border: 1px solid rgba(255, 95, 109, .34);
  background: rgba(255, 95, 109, .10);
  color: #ffd0d4;
}
body.ctk-app .login .ck-entrada__recado--ok {
  border-color: rgba(62, 207, 142, .34);
  background: rgba(62, 207, 142, .10);
  color: #c7f5e2;
}
/* ------------------------------------------------------------
   8. NO CELULAR E NO TABLET

   Empilha: logotipo, arte reduzida, chamada, formulario. A arte
   nunca rouba a vez do formulario - ela encolhe primeiro.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  body.ctk-app .wrapper > .login { grid-template-columns: 1fr; }
  body.ctk-app .login .login_left_combo_parent { padding: 28px 20px 8px; }
  body.ctk-app .login .login_left_combo { max-width: 620px; text-align: center; }
  body.ctk-app .login .login_left_combo > p { margin-left: auto; margin-right: auto; }
  body.ctk-app .ck-nexus { margin: 0 auto 10px; width: min(72vw, 300px); }
}
@media (max-width: 768px) {
  body.ctk-app .wrapper > .login { min-height: auto; padding-bottom: 32px; }
  body.ctk-app .login .login_left_combo_parent { padding: 22px 18px 4px; }
  body.ctk-app .login .login_left_combo .logo img { height: 32px; margin-bottom: 18px; }
  body.ctk-app .login .login_left_combo h1 { font-size: clamp(26px, 7vw, 34px); }
  body.ctk-app .login .login_left_combo > p { font-size: 15px; margin-bottom: 22px; }
  body.ctk-app .ck-nexus { width: min(62vw, 230px); }
  body.ctk-app .login .ck-entrada__painel {
    margin: 0 18px;
    width: auto;
    padding: 26px 20px;
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
@media (max-width: 380px) {
  body.ctk-app .ck-nexus { width: 178px; }
  body.ctk-app .login .ck-entrada__painel { margin: 0 16px; padding: 22px 16px; }
  body.ctk-app .login .login_left_combo h1 { font-size: 25px; }
}
/* teclado aberto no celular: a arte sai da frente do campo */
@media (max-width: 768px) and (max-height: 520px) {
  body.ctk-app .ck-nexus { display: none; }
  body.ctk-app .login .login_left_combo h1 { font-size: 22px; margin-bottom: 8px; }
  body.ctk-app .login .login_left_combo > p { display: none; }
}

/* ------------------------------------------------------------
   9. MENOS MOVIMENTO E APARELHOS SIMPLES

   A arte continua inteira - so para de se mexer.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.ctk-app .ck-nexus * { animation: none !important; transition: none !important; }
  body.ctk-app .ck-nexus__svg { transform: none !important; }
  body.ctk-app .ck-nexus__fio { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .5; }
  body.ctk-app .ck-nexus__pulso { display: none; }
}
html[data-ck-movimento="reduzido"] body.ctk-app .ck-nexus *,
body.ctk-app .ck-nexus--parado * { animation: none !important; }
html[data-ck-movimento="reduzido"] body.ctk-app .ck-nexus__fio,
body.ctk-app .ck-nexus--parado .ck-nexus__fio { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .5; }

/* ------------------------------------------------------------
   10. MODO CLARO

   Fundo branco perolado, arte mantida com a mesma profundidade,
   painel claro e texto escuro. Sem inverter no automatico: cada
   valor foi escolhido.
   ------------------------------------------------------------ */
html.ck-claro body.ctk-app .wrapper > .login { background: #f4f1fb; }
html.ck-claro body.ctk-app .wrapper > .login::before {
  background: radial-gradient(60% 50% at 55% 45%, rgba(122, 65, 240, .16), transparent 70%);
}
html.ck-claro body.ctk-app .login .login_left_combo h1 { color: #1c1730; }
html.ck-claro body.ctk-app .login .login_left_combo > p { color: #5b5473; }
html.ck-claro body.ctk-app .login .ck-entrada__olho { color: #6528d4; }
html.ck-claro body.ctk-app .login .ck-entrada__painel {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(45, 33, 80, .12);
  box-shadow: 0 24px 60px rgba(45, 33, 80, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
}
html.ck-claro body.ctk-app .login .ck-entrada__titulo { color: #1c1730; }
html.ck-claro body.ctk-app .login .ck-entrada__apoio,
html.ck-claro body.ctk-app .login .ck-entrada__rodape { color: #6f6889; }
html.ck-claro body.ctk-app .login label { color: #5b5473; }
html.ck-claro body.ctk-app .login input[type="text"],
html.ck-claro body.ctk-app .login input[type="email"],
html.ck-claro body.ctk-app .login input[type="password"],
html.ck-claro body.ctk-app .login select {
  background: #ffffff !important;
  border-color: rgba(45, 33, 80, .14) !important;
  color: #1c1730 !important;
}
html.ck-claro body.ctk-app .login input:-webkit-autofill {
  -webkit-text-fill-color: #1c1730;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}
html.ck-claro body.ctk-app .login a.main,
html.ck-claro body.ctk-app .login a.dec { color: #6528d4; }
html.ck-claro body.ctk-app .ck-nexus__vidro { fill: rgba(122, 65, 240, .04); stroke: rgba(101, 40, 212, .14); }
html.ck-claro body.ctk-app .ck-nexus__no { fill: #7a41f0; }
html.ck-claro body.ctk-app .ck-nexus__no--2 { fill: #2f86d6; }
html.ck-claro body.ctk-app .ck-nexus__no--3 { fill: #9268fb; }

/* ------------------------------------------------------------
   11. DESFAZER AS CAIXAS ANTIGAS

   O tema antigo montava esse lado como coluna flex estreita, e a
   arte saia com 109px dentro de uma coluna de 605px. Aqui as
   caixas voltam a ocupar a largura que lhes cabe.
   ------------------------------------------------------------ */
body.ctk-app .wrapper { width: 100%; max-width: none; padding: 0; margin: 0; }
body.ctk-app .wrapper > .login { width: 100%; max-width: none; margin: 0; }
body.ctk-app .login .login_left_combo_parent {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto;
}
body.ctk-app .login .login_left_combo {
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto;
  height: auto !important;
}
/* sem !important: as faixas de celular precisam poder reduzir a arte */
body.ctk-app .ck-nexus { width: min(100%, 460px); }

/* ------------------------------------------------------------
   12. A GRADE NO NIVEL CERTO

   O formulario nao e irmao da arte: os dois moram dentro de
   .login_left_combo_parent, que a plataforma monta como uma linha
   do bootstrap. Entao a divisao 55/45 pertence a ele, e nao a
   .login. Sem isso o texto da chamada e o formulario disputavam a
   mesma faixa e se sobrepunham.
   ------------------------------------------------------------ */
body.ctk-app .wrapper > .login {
  display: block !important;
  grid-template-columns: none !important;
}
body.ctk-app .login .login_left_combo_parent {
  display: grid !important;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 40px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px clamp(24px, 5vw, 88px);
}
/* bloco, e nao flex: como item flex o painel encolhia ate 182px */
body.ctk-app .login .login_left_combo_parent > .col-md-6 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  display: block !important;
}

/* o painel de vidro: e o .login_innre que a plataforma ja usa */
body.ctk-app .login .login_innre {
  width: min(100%, 460px) !important;
  margin: 0 auto !important;
  float: none !important;
  padding: 34px 30px;
  border-radius: 22px;
  background: var(--ck-vidro-fundo, rgba(31, 26, 51, .62));
  border: 1px solid var(--ck-vidro-borda, rgba(255, 255, 255, .12));
  box-shadow: 0 30px 80px rgba(6, 4, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
html.ck-claro body.ctk-app .login .login_innre {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(45, 33, 80, .12);
  box-shadow: 0 24px 60px rgba(45, 33, 80, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* o titulo do painel, que vinha gigante e quebrando em quatro linhas */
body.ctk-app .login .login_innre h1,
body.ctk-app .login .login_innre h2 {
  font-family: var(--ck-fonte-titulo);
  font-size: var(--ck-t-pagina, 28px) !important;
  line-height: 1.2 !important;
  font-weight: var(--ck-p-titulo, 650);
  color: var(--ck-texto, #efecf7) !important;
  margin: 0 0 8px !important;
}
html.ck-claro body.ctk-app .login .login_innre h1,
html.ck-claro body.ctk-app .login .login_innre h2 { color: #1c1730 !important; }
body.ctk-app .login .login_innre > p:first-of-type {
  font-size: var(--ck-t-apoio, 14px);
  color: var(--ck-texto-3, #8e7fb4);
  margin: 0 0 24px;
}

@media (max-width: 1024px) {
  body.ctk-app .login .login_left_combo_parent {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 28px 20px 36px;
    gap: 18px;
  }
}
@media (max-width: 768px) {
  body.ctk-app .login .login_innre { padding: 26px 20px; border-radius: 20px; }
}

/* o titulo do painel e um <p class="title main"> com 44px de fonte
   e 22px de entrelinha - por isso as linhas se atropelavam */
body.ctk-app .login .login_innre p.title,
body.ctk-app .login .login_innre .title.main {
  font-family: var(--ck-fonte-titulo);
  font-size: var(--ck-t-pagina, 28px) !important;
  line-height: 1.22 !important;
  font-weight: var(--ck-p-titulo, 650) !important;
  color: var(--ck-texto, #efecf7) !important;
  margin: 0 0 8px !important;
  text-wrap: balance;
}
html.ck-claro body.ctk-app .login .login_innre p.title,
html.ck-claro body.ctk-app .login .login_innre .title.main { color: #1c1730 !important; }
/* a linha de apoio logo abaixo do titulo */
body.ctk-app .login .login_innre p.title + p,
body.ctk-app .login .login_innre .title.main + p {
  font-size: var(--ck-t-apoio, 14px) !important;
  line-height: 1.5 !important;
  color: var(--ck-texto-3, #8e7fb4) !important;
  margin: 0 0 24px !important;
}
/* o painel acompanha a altura da tela em vez de ficar la embaixo */
@media (min-width: 1025px) {
  body.ctk-app .login .login_left_combo_parent > .col-md-6 { align-self: center; }
  body.ctk-app .login .login_left_combo { align-self: center; }
}

/* ------------------------------------------------------------
   13. SOLTAR A LARGURA DA TELA DE ENTRADA

   A plataforma envolve a tela num .content-container travado em
   1100px e centrado com margem automatica - por isso sobravam
   163px de vazio de cada lado e a experiencia parecia uma caixa
   no meio do monitor. A trava vale para o site logado, nao para a
   porta de entrada: aqui ela sai, e so na classe .welcome-container,
   que existe apenas nestas telas.
   ------------------------------------------------------------ */
body.ctk-app .content-container.welcome-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.ctk-app .welcome-container .effect-load,
body.ctk-app .welcome-container > .effect-load > .wrapper,
body.ctk-app .welcome-container .wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------
   14. O TAMANHO DA ARTE POR TELA - fica por ultimo de proposito

   As faixas de celular da secao 8 vinham antes da secao 11, e como
   as duas tem a mesma forca, a ultima do arquivo vencia: a arte
   ficava com 460px tambem no celular e empurrava o formulario para
   fora da tela. Este bloco fecha o arquivo justamente para ser o
   ultimo a falar sobre a largura da arte.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  body.ctk-app .ck-nexus { width: min(46vw, 260px); margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
  body.ctk-app .ck-nexus { width: min(52vw, 220px); }
}
@media (max-width: 430px) {
  body.ctk-app .ck-nexus { width: min(50vw, 190px); }
}
@media (max-width: 360px) {
  body.ctk-app .ck-nexus { width: 156px; }
}
/* teclado aberto: some de vez para o campo nao ficar escondido */
@media (max-width: 768px) and (max-height: 520px) {
  body.ctk-app .ck-nexus { display: none !important; }
}

/* ------------------------------------------------------------
   15. O CADASTRO EM DUAS ETAPAS
   ------------------------------------------------------------ */
body.ctk-app .login .ck-cad__indicador {
  font-size: var(--ck-t-legenda, 12px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ck-roxo-300, #b295ff);
  margin: 0 0 16px;
}
html.ck-claro body.ctk-app .login .ck-cad__indicador { color: #6528d4; }
body.ctk-app .login .ck-cad__etapa[hidden] { display: none !important; }
body.ctk-app .login .ck-cad__botoes { margin-top: 12px; text-align: center; }
body.ctk-app .login .ck-cad__voltar {
  background: none;
  border: 0;
  color: var(--ck-texto-3, #8e7fb4);
  font-size: var(--ck-t-apoio, 14px);
  font-weight: 600;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
}
body.ctk-app .login .ck-cad__voltar:hover { color: var(--ck-roxo-300, #b295ff); }
body.ctk-app .login .ck-cad__seguir { margin-top: 8px; }

/* mensagens por campo */
body.ctk-app .login .ck-cad__erro,
body.ctk-app .login .ck-cad__bom {
  font-size: var(--ck-t-legenda, 12px);
  line-height: 1.4;
  margin: 6px 0 0;
}
body.ctk-app .login .ck-cad__erro { color: #ff9aa4; }
body.ctk-app .login .ck-cad__bom { color: #7fe3b8; }
html.ck-claro body.ctk-app .login .ck-cad__erro { color: #c2283a; }
html.ck-claro body.ctk-app .login .ck-cad__bom { color: #1a7f57; }
body.ctk-app .login .ck-cad--ruim input,
body.ctk-app .login .ck-cad--ruim select { border-color: #ff5f6d !important; }

/* medidor de seguranca da senha */
body.ctk-app .login .ck-cad__medidor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
body.ctk-app .login .ck-cad__barra {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: var(--ck-borda, rgba(255,255,255,.10));
  overflow: hidden;
}
body.ctk-app .login .ck-cad__barra > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #ff5f6d;
  transition: width 220ms ease, background 220ms ease;
}
body.ctk-app .login .ck-cad__nivel {
  flex: 0 0 auto;
  font-size: var(--ck-t-legenda, 12px);
  color: var(--ck-texto-3, #8e7fb4);
  min-width: 72px;
}
body.ctk-app .login [data-ck-forca="0"] .ck-cad__barra > i { width: 15%; background: #ff5f6d; }
body.ctk-app .login [data-ck-forca="1"] .ck-cad__barra > i { width: 35%; background: #ff8a5f; }
body.ctk-app .login [data-ck-forca="2"] .ck-cad__barra > i { width: 60%; background: #f5b544; }
body.ctk-app .login [data-ck-forca="3"] .ck-cad__barra > i { width: 82%; background: #9268fb; }
body.ctk-app .login [data-ck-forca="4"] .ck-cad__barra > i { width: 100%; background: #3ecf8e; }


/* =================================================================
   16. Tela de sucesso do cadastro
   ================================================================= */
.ck-pronto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 14px 4px 6px;
}

.ck-pronto__disco {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(120% 120% at 30% 20%, var(--ck-roxo-300, #b295ff), var(--ck-roxo-600, #6528d4) 70%);
  box-shadow: 0 18px 40px rgba(101, 40, 212, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: ck-pronto-entra 520ms var(--ck-curva, cubic-bezier(.22, .61, .36, 1)) both;
}

.ck-pronto__visto {
  width: 42px;
  height: 42px;
}

.ck-pronto__visto path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: ck-pronto-risca 460ms 260ms var(--ck-curva, cubic-bezier(.22, .61, .36, 1)) forwards;
}

@keyframes ck-pronto-entra {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ck-pronto-risca {
  to { stroke-dashoffset: 0; }
}

.ck-pronto__titulo {
  margin: 0;
  font-family: var(--ck-fonte-titulo, 'Sora', sans-serif);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ck-texto, #efecf7);
}

.ck-pronto__texto {
  margin: 0;
  max-width: 34ch;
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ck-texto-2, #b9a8dd);
}

.ck-pronto__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--ck-r-campo, 12px);
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none;
  background: linear-gradient(180deg, var(--ck-roxo-500, #7a41f0), var(--ck-roxo-600, #6528d4));
  box-shadow: 0 10px 24px rgba(101, 40, 212, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform var(--ck-mov-rapido, 160ms) var(--ck-curva, ease), box-shadow var(--ck-mov-rapido, 160ms) var(--ck-curva, ease);
}

.ck-pronto__botao:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(101, 40, 212, .48), inset 0 1px 0 rgba(255, 255, 255, .28); }
.ck-pronto__botao:active { transform: translateY(1px); }
.ck-pronto__botao:focus-visible { outline: 3px solid var(--ck-foco, #b295ff); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ck-pronto__disco { animation: none; }
  .ck-pronto__visto path { animation: none; stroke-dashoffset: 0; }
  .ck-pronto__botao { transition: none; }
}


/* =================================================================
   17. O PALCO, DE NOVO
   O dark.css da plataforma pinta .login de cinza (#212121) e esse
   cinza aparecia como um retangulo estranho atras das telas de
   entrada. Aqui devolvemos o fundo do Ciutek. Vem no fim do arquivo
   de proposito, para ganhar do que vier antes.
   ================================================================= */
body.ctk-app .wrapper > .login,
body.ctk-app .login {
  background: var(--ck-fundo, #0d0a16) !important;
  min-height: 100vh;
  min-height: 100dvh;
}

/* o brilho roxo que costura os dois lados */
body.ctk-app .wrapper > .login::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 52% at 26% 34%, rgba(122, 65, 240, .30), transparent 70%),
    radial-gradient(46% 44% at 78% 76%, rgba(101, 40, 212, .20), transparent 72%);
}
body.ctk-app .wrapper > .login > * { position: relative; z-index: 1; }

/* o corpo tambem, para nao sobrar faixa clara em telas altas */
body.ctk-app { background: var(--ck-fundo, #0d0a16) !important; }

/* No /register o formulario e irmao da arte dentro do
   login_left_combo_parent, igual ao /login. A grade ja esta na secao
   12; aqui so garantimos que a coluna do formulario nao volte a
   flutuar por causa do .col-md-6 do bootstrap. */
body.ctk-app .login .login_left_combo_parent > .col-md-6 {
  float: none !important;
}


/* =================================================================
   18. SEM CINZA DENTRO DO PAINEL
   O dark.css pinta o proprio <form> de #212121, o que criava uma
   faixa cinza dentro do vidro. O painel ja tem o seu fundo.
   ================================================================= */
body.ctk-app .login_innre form,
body.ctk-app .login_innre .login_signup_combo,
body.ctk-app .login_innre .signup__,
body.ctk-app .login_innre .login__,
body.ctk-app .login_innre .terms,
body.ctk-app .login_innre .ck-cad__etapa,
body.ctk-app .login_innre .wow_form_fields {
  background: transparent !important;
  box-shadow: none !important;
}

/* a barra de etapas: um indicador visivel, nao so texto */
body.ctk-app .ck-cad__indicador {
  position: relative;
  margin: 4px 0 18px;
  padding-bottom: 12px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ck-texto-3, #8e7fb4);
}
body.ctk-app .ck-cad__indicador::before,
body.ctk-app .ck-cad__indicador::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
}
body.ctk-app .ck-cad__indicador::before {
  width: 100%;
  background: rgba(255, 255, 255, .10);
}
body.ctk-app .ck-cad__indicador::after {
  width: 50%;
  background: linear-gradient(90deg, var(--ck-roxo-500, #7a41f0), var(--ck-roxo-300, #b295ff));
  transition: width 260ms var(--ck-curva, ease);
}
body.ctk-app .ck-cad--p2 .ck-cad__indicador::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  body.ctk-app .ck-cad__indicador::after { transition: none; }
}


/* =================================================================
   19. O BOTAO VOLTAR
   A plataforma pinta todo .login button de roxo solido com
   !important, entao o secundario precisa de !important tambem.
   ================================================================= */
body.ctk-app .ck-cad__botoes {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

body.ctk-app .login .ck-cad__voltar {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ck-borda, rgba(255, 255, 255, .14)) !important;
  border-radius: var(--ck-r-campo, 12px) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ck-texto-2, #b9a8dd) !important;
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 15px;
  font-weight: 600;
  transition: color var(--ck-mov-rapido, 160ms) var(--ck-curva, ease),
              border-color var(--ck-mov-rapido, 160ms) var(--ck-curva, ease),
              background-color var(--ck-mov-rapido, 160ms) var(--ck-curva, ease);
}

body.ctk-app .login .ck-cad__voltar:hover {
  color: var(--ck-texto, #efecf7) !important;
  border-color: var(--ck-foco, #b295ff) !important;
  background: rgba(178, 149, 255, .10) !important;
}

body.ctk-app .login .ck-cad__voltar:focus-visible {
  outline: 3px solid var(--ck-foco, #b295ff);
  outline-offset: 2px;
}

/* o Continuar da etapa 1 usa a mesma altura do botao principal */
body.ctk-app .login .ck-cad__seguir {
  width: 100%;
  min-height: 50px;
}

/* no tema claro o secundario continua legivel */
html.ck-claro body.ctk-app .login .ck-cad__voltar {
  color: var(--ck-roxo-600, #6528d4) !important;
  border-color: rgba(101, 40, 212, .28) !important;
}
html.ck-claro body.ctk-app .login .ck-cad__voltar:hover {
  background: rgba(101, 40, 212, .08) !important;
}


/* =================================================================
   20. RECUPERACAO DE ACESSO
   A confirmacao e sempre a mesma, exista ou nao aquela conta.
   ================================================================= */
.ck-recup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 10px 4px 4px;
}

.ck-recup__disco {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ck-roxo-300, #b295ff);
  background: rgba(122, 65, 240, .16);
  border: 1px solid rgba(178, 149, 255, .28);
}

.ck-recup__icone { width: 36px; height: 36px; }

.ck-recup__titulo {
  margin: 0;
  font-family: var(--ck-fonte-titulo, 'Sora', sans-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ck-texto, #efecf7);
}
.ck-recup__titulo:focus { outline: none; }
.ck-recup__titulo:focus-visible { outline: 3px solid var(--ck-foco, #b295ff); outline-offset: 4px; }

.ck-recup__texto {
  margin: 0;
  max-width: 36ch;
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ck-texto-2, #b9a8dd);
}

.ck-recup__dica {
  margin: 0;
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 13px;
  color: var(--ck-texto-3, #8e7fb4);
}

body.ctk-app .login .ck-recup__reenviar {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  border: 1px solid var(--ck-borda, rgba(255, 255, 255, .14)) !important;
  border-radius: var(--ck-r-campo, 12px) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ck-texto, #efecf7) !important;
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 15px;
  font-weight: 600;
}
body.ctk-app .login .ck-recup__reenviar:hover:not(:disabled) {
  border-color: var(--ck-foco, #b295ff) !important;
  background: rgba(178, 149, 255, .10) !important;
}
body.ctk-app .login .ck-recup__reenviar:disabled {
  opacity: .55;
  cursor: default;
}

.ck-recup__voltar {
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-roxo-300, #b295ff);
  text-decoration: none;
  padding: 10px 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ck-recup__voltar:hover { text-decoration: underline; }
.ck-recup__voltar:focus-visible { outline: 3px solid var(--ck-foco, #b295ff); outline-offset: 2px; border-radius: 8px; }

html.ck-claro .ck-recup__disco { color: var(--ck-roxo-600, #6528d4); background: rgba(101, 40, 212, .10); border-color: rgba(101, 40, 212, .22); }
html.ck-claro .ck-recup__voltar { color: var(--ck-roxo-600, #6528d4); }
html.ck-claro body.ctk-app .login .ck-recup__reenviar { color: var(--ck-roxo-600, #6528d4) !important; border-color: rgba(101, 40, 212, .26) !important; }


/* 21. Aviso: link de recuperacao expirado */
.ck-pronto--aviso .ck-pronto__disco {
  background: radial-gradient(120% 120% at 30% 20%, #ffd166, #d98324 72%);
  box-shadow: 0 18px 40px rgba(217, 131, 36, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ck-pronto--aviso .ck-pronto__visto path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }


/* =================================================================
   22. CONFIRMACAO DE E-MAIL
   Esta tela vive dentro do app (nao e a tela de entrada), entao a
   pele vem so pelo bloco .user_not_active.
   ================================================================= */
.user_not_active .center-container {
  max-width: 520px;
  margin: 48px auto;
  padding: 34px 30px;
  text-align: center;
  border-radius: var(--ck-r-painel, 20px);
  background: var(--ck-superficie, #171327);
  border: 1px solid var(--ck-borda, rgba(255, 255, 255, .10));
  box-shadow: 0 24px 60px rgba(6, 4, 12, .40);
}

.ck-ativa__disco {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ck-roxo-300, #b295ff);
  background: rgba(122, 65, 240, .16);
  border: 1px solid rgba(178, 149, 255, .28);
}
.ck-ativa__icone { width: 40px; height: 40px; }

.user_not_active .center-container h2 {
  margin: 0 0 10px;
  font-family: var(--ck-fonte-titulo, 'Sora', sans-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ck-texto, #efecf7);
}

.user_not_active .center-container > p {
  margin: 0 auto 22px;
  max-width: 42ch;
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ck-texto-2, #b9a8dd);
}

.user_not_active .center-container br { display: none; }

.user_not_active .wow_form_fields { text-align: left; margin-bottom: 16px; }
.user_not_active .wow_form_fields label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ck-texto-2, #b9a8dd);
}
.user_not_active .wow_form_fields input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--ck-r-campo, 12px);
  border: 1px solid var(--ck-borda, rgba(255, 255, 255, .12));
  background: var(--ck-superficie-2, #1f1a33);
  color: var(--ck-texto, #efecf7);
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 15px;
}
.user_not_active .wow_form_fields input:focus {
  outline: none;
  border-color: var(--ck-foco, #b295ff);
  box-shadow: 0 0 0 3px rgba(178, 149, 255, .22);
}

.user_not_active .btn.btn-main {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: var(--ck-r-campo, 12px);
  font-family: var(--ck-fonte-texto, 'Manrope', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  background: linear-gradient(180deg, var(--ck-roxo-500, #7a41f0), var(--ck-roxo-600, #6528d4)) !important;
  box-shadow: 0 10px 24px rgba(101, 40, 212, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.user_not_active .btn.btn-main:focus-visible { outline: 3px solid var(--ck-foco, #b295ff); outline-offset: 3px; }

html.ck-claro .user_not_active .center-container { background: #fff; border-color: rgba(16, 8, 34, .10); }
html.ck-claro .ck-ativa__disco { color: var(--ck-roxo-600, #6528d4); background: rgba(101, 40, 212, .10); border-color: rgba(101, 40, 212, .22); }

@media (max-width: 430px) {
  .user_not_active .center-container { margin: 20px 16px; padding: 26px 20px; }
}


/* =================================================================
   23. MEDIDAS FINAIS
   O welcome.css da plataforma fixa height e line-height de 60px nos
   botoes, com peso maior que a secao 6. Aqui a altura volta para a
   faixa combinada (48-52px) e as margens do celular ficam entre
   16 e 20px, contando o recuo do proprio container.
   ================================================================= */
body.ctk-app .login .btn-main,
body.ctk-app .login .ck-cad__seguir,
body.ctk-app .login .ck-pronto__botao {
  height: 52px !important;
  min-height: 52px !important;
  line-height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* o secundario e o de reenvio ficam um degrau abaixo, mas acima de 44 */
body.ctk-app .login .ck-cad__voltar,
body.ctk-app .login .ck-recup__reenviar {
  height: 48px !important;
  line-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Margens do celular: o .content-container ja da 14px de cada lado.
   O painel soma so o que falta para chegar perto de 18px. */
@media (max-width: 768px) {
  body.ctk-app .login .login_left_combo_parent {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  body.ctk-app .login .login_innre { padding: 24px 18px !important; }
}

@media (max-width: 360px) {
  body.ctk-app .login .login_left_combo_parent {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  body.ctk-app .login .login_innre { padding: 22px 16px !important; }
}

/* alvos de toque: nada abaixo de 44px */
body.ctk-app .login a,
body.ctk-app .login label,
body.ctk-app .login .ck-entrada__olhinho {
  min-height: 44px;
}
body.ctk-app .login .login_innre p a,
body.ctk-app .login .login_innre .dec {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
body.ctk-app .login .login_left_combo .logo,
body.ctk-app .login .login_innre label {
  min-height: 0;
}


/* =================================================================
   24. EMPILHAR ATE 1024
   A grade mora no .login_left_combo_parent, mas a secao 8 empilhava
   o .login. Em 1024 o painel ficava com 389px, abaixo dos 400
   combinados. Aqui a coluna unica passa a valer no lugar certo.
   ================================================================= */
@media (max-width: 1024px) {
  body.ctk-app .login .login_left_combo_parent {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  body.ctk-app .login .login_left_combo_parent > .col-md-6 {
    justify-self: center;
    width: 100% !important;
  }
  body.ctk-app .login .login_innre { width: min(100%, 460px) !important; }
}


/* =================================================================
   25. LAPTOPS ESTREITOS (1025px a 1200px)
   Duas colunas ainda cabem, mas o recuo do palco estava comendo o
   painel e derrubando ele abaixo dos 400px combinados.
   ================================================================= */
@media (min-width: 1025px) and (max-width: 1200px) {
  body.ctk-app .login .login_left_combo_parent {
    padding-left: 28px;
    padding-right: 28px;
    gap: 24px;
  }
  body.ctk-app .login .login_innre { width: min(100%, 460px) !important; }
}


/* =================================================================
   26. CONTRASTE DO RODAPE
   No tema claro os links do rodape ficavam em cinza claro sobre
   fundo claro (contraste medido: 1.51). Agora passam o minimo.
   ================================================================= */
body.ctk-app .login .footer,
body.ctk-app .login .footer p,
body.ctk-app .login .footer span {
  color: var(--ck-texto-3, #8e7fb4) !important;
}
body.ctk-app .login .footer a {
  color: var(--ck-texto-2, #b9a8dd) !important;
  text-decoration: none;
}
body.ctk-app .login .footer a:hover {
  color: var(--ck-roxo-300, #b295ff) !important;
  text-decoration: underline;
}
html.ck-claro body.ctk-app .login .footer,
html.ck-claro body.ctk-app .login .footer p,
html.ck-claro body.ctk-app .login .footer span {
  color: #6f6889 !important;
}
html.ck-claro body.ctk-app .login .footer a {
  color: #4c4468 !important;
}
html.ck-claro body.ctk-app .login .footer a:hover {
  color: var(--ck-roxo-600, #6528d4) !important;
}
body.ctk-app .login .footer a:focus-visible {
  outline: 3px solid var(--ck-foco, #b295ff);
  outline-offset: 2px;
  border-radius: 6px;
}


/* =================================================================
   27. MENOS MOVIMENTO NAS TELAS NOVAS
   As telas de sucesso, de link expirado e a barra de etapas tambem
   obedecem a escolha guardada em Configuracoes, nao so a do sistema.
   ================================================================= */
html[data-ck-movimento="reduzido"] .ck-pronto__disco,
html[data-ck-movimento="reduzido"] .ck-pronto__visto path,
html[data-ck-movimento="reduzido"] .ck-cad__indicador::after,
html[data-ck-movimento="reduzido"] .ck-pronto__botao,
html[data-ck-movimento="reduzido"] .ck-cad__medidor i {
  animation: none !important;
  transition: none !important;
}
html[data-ck-movimento="reduzido"] .ck-pronto__visto path {
  stroke-dashoffset: 0 !important;
}


/* =================================================================
   28. ALVOS DE TOQUE DOS AVATARES
   Os retratos de quem ja esta no Ciutek eram links de 44x20. Agora
   tem 44px de altura, como o resto.
   ================================================================= */
body.ctk-app .login_innre .user-image .ck-toque-alvo,
body.ctk-app .login_innre .user-image > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}


/* =================================================================
   29. O FORMULARIO PRIMEIRO, NO CELULAR
   Medido em 390x844: o primeiro campo caia em 766px e o botao em
   1054px, ou seja, fora da tela. Aqui a apresentacao encolhe para
   o formulario subir. A arte continua, so menor.
   ================================================================= */
@media (max-width: 430px) {
  body.ctk-app .login .login_left_combo_parent { padding-top: 12px !important; }
  body.ctk-app .login .login_left_combo .logo img { height: 26px !important; margin-bottom: 10px !important; }
  body.ctk-app .login .ck-entrada__olho { font-size: 10px; margin-bottom: 6px; }
  body.ctk-app .login .login_left_combo h1 { font-size: 26px !important; line-height: 1.18 !important; margin: 0 0 8px !important; }
  body.ctk-app .login .login_left_combo > p { font-size: 14px !important; line-height: 1.45 !important; margin-bottom: 10px !important; }
  body.ctk-app .ck-nexus { width: 150px !important; margin: 0 auto 10px !important; }
  body.ctk-app .login .login_innre { padding: 20px 16px !important; }
  body.ctk-app .login .login_innre .title { font-size: 20px !important; margin-bottom: 4px !important; }
  body.ctk-app .login .login_innre .desc { font-size: 13px !important; margin-bottom: 14px !important; }
}

/* telas curtas de verdade: a arte sai de cena e o formulario manda */
@media (max-width: 430px) and (max-height: 700px) {
  body.ctk-app .ck-nexus { display: none !important; }
  body.ctk-app .login .login_left_combo > p { display: none; }
}