/* ============================================================================
   LOGIN DO VENDA ONLINE - mesmo cenario aquatico da Bilheteria

   Servido por ServerModule.CustomFiles: editar e dar F5 ja vale, nao precisa
   recompilar. As classes sao aplicadas pelo login-cajueiro.js.

   O cartao usa vidro escuro (opcao D): fundo azul translucido com desfoque e
   texto claro. A barra de topo com a logo foi removida - o mascote e o nome
   flutuam acima do cartao, como na Bilheteria.
   ========================================================================== */

@keyframes cjGrad  { 0% {background-position:0% 0%} 50% {background-position:100% 100%} 100% {background-position:0% 0%} }
@keyframes cjSobe  { to { transform: translateY(-110vh) translateX(30px); opacity: 0; } }
@keyframes cjOnda  { to { transform: translateX(-50%); } }
@keyframes cjFlut  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* A subida usa a propriedade "translate", nao "transform": o keyframe terminava
   em transform:none e, com fill-mode both, passava por cima do transform inline
   que o login-cajueiro.js usa para encaixar o cartao na tela pequena - animacao
   vence estilo inline. As duas propriedades se somam, entao o efeito continua. */
@keyframes cjEntra { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes cjFl1   { 0%,100% { transform: translate(0,0); } 50% { transform: translate(80px,50px); } }
@keyframes cjFl2   { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-60px,-70px); } }

/* ---------- fundo ---------- */
.cj-vo-fundo {
  background: linear-gradient(160deg, #01579b 0%, #0288d1 45%, #26c6da 100%) !important;
  background-size: 200% 200% !important;
  animation: cjGrad 14s ease infinite;
  position: relative;
  overflow: hidden;
}
/* o TUnimPanel pinta a cor do DFM nas camadas internas: sem deixar
   transparentes, o cenario fica atras de um retangulo solido */
.cj-vo-fundo > .x-body-wrap-el,
.cj-vo-fundo > .x-body-wrap-el > .x-body-el,
.cj-vo-fundo > .x-body-el,
.cj-vo-fundo .x-body-wrap-el > .x-body-el { background: transparent !important; }

.cj-vo-cenario { position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none; overflow: hidden; z-index: 0; }
.cj-vo-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.cj-vo-bolha { position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.85), rgba(255,255,255,.12) 60%);
  animation: cjSobe linear infinite; }
.cj-vo-ondas { position: absolute; bottom: 0; left: 0; width: 200%; height: 120px; display: flex; opacity: .5; }
.cj-vo-ondas svg { width: 50%; height: 100%; flex-shrink: 0; }

/* ---------- cartao: vidro escuro sobre o azul (opcao D) ----------
   O backdrop-filter e o que borra o cenario atras: sem ele o texto claro
   competiria com as bolhas passando. Navegador antigo perde so o desfoque. */
.cj-vo-card {
  border-radius: 20px !important;
  background: rgba(4, 26, 71, .42) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .28) !important;
  box-shadow: 0 18px 44px rgba(1, 40, 80, .45) !important;
  animation: cjEntra .6s cubic-bezier(.2,.9,.3,1.2) both;
  z-index: 2;
}
/* o TUnimPanel pinta o clWhite do DFM nas camadas internas */
.cj-vo-card > .x-body-wrap-el,
.cj-vo-card > .x-body-wrap-el > .x-body-el,
.cj-vo-card > .x-body-el,
.cj-vo-card .x-body-wrap-el > .x-body-el { background: transparent !important; }

/* ---------- mascote + nome acima do cartao ----------
   position:absolute de proposito: dentro do cartao o overflow:hidden recorta,
   e no fluxo normal empurraria os campos para baixo. */
.cj-vo-topo {
  position: absolute; left: 0; right: 0;
  text-align: center; pointer-events: none; z-index: 3;
  /* altura fixa de proposito: o login-cajueiro.js usa esta medida para decidir
     quanto o cartao desce. Se ela dependesse do texto, mudaria quando a fonte
     do nome terminasse de carregar - e o calculo, ja feito, ficaria errado
     (era o que fazia o "CAJUEIRO PARK" encostar no titulo do cartao). */
  height: 120px;
}
.cj-vo-topo img {
  width: 92px;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
  animation: cjFlut 3.4s ease-in-out infinite;
  display: block; margin: 0 auto;
}
/* o nome sobe para ficar colado no mascote (pedido do Dino) */
.cj-vo-topo .cjTit {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 800; font-size: 19px; letter-spacing: 1px;
  color: #ffffff; text-shadow: 0 2px 10px rgba(1,40,80,.55);
  margin-top: -10px;
}
.cj-vo-topo .cjTit span { color: #b3ecff; }

/* ---------- campos ----------
   Mais altos, mais arredondados e com um leve degrade interno, para nao
   parecerem "buracos" no cartao de vidro. */
.cj-vo-card .x-field .x-input-el {
  height: 46px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(255, 255, 255, .40) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.11)) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  padding: 0 15px !important;
  letter-spacing: .2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(1,40,80,.18);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.cj-vo-card .x-field .x-input-el::placeholder {
  color: rgba(255, 255, 255, .70) !important;
  opacity: 1;
  font-weight: 400;
}
.cj-vo-card .x-field .x-input-el:focus {
  border-color: #4dd0e1 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.17)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 0 0 4px rgba(77, 208, 225, .25) !important;
}
/* o wrapper do campo tambem tem pele propria no Ext mobile */
.cj-vo-card .x-field .x-input-wrap-el,
.cj-vo-card .x-field .x-body-el { background: transparent !important; border: 0 !important; }

/* ---------- botao Entrar: azul escuro, mais arredondado ---------- */
.cj-vo-entrar {
  height: 50px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #1565c0, #0a337a) !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  box-shadow: 0 8px 20px rgba(1, 30, 70, .48), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.cj-vo-entrar .x-text-el,
.cj-vo-entrar .x-inner-el,
.cj-vo-entrar .x-innerhtml {
  color: #ffffff !important;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
}
/* as camadas internas do botao mobile pintam por cima da cor nova */
.cj-vo-entrar .x-inner-el,
.cj-vo-entrar .x-button-el,
.cj-vo-entrar .x-body-el { background: transparent !important; border: 0 !important; }
.cj-vo-entrar:hover  { filter: brightness(1.10); }
.cj-vo-entrar:active { transform: scale(.98); box-shadow: 0 4px 12px rgba(1,30,70,.5); }

/* ---------- textos do cartao ----------
   As cores vem do DFM (preto, vermelho, cinza) e sumiriam no fundo escuro,
   entao o CSS clareia todas. Classes aplicadas no proprio uLogin.dfm. */
.cj-vo-tit, .cj-vo-tit .x-innerhtml {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.cj-vo-lnk, .cj-vo-lnk .x-innerhtml {
  color: #b3e5fc !important;
  font-weight: 600 !important;
}
.cj-vo-lnk-fraco, .cj-vo-lnk-fraco .x-innerhtml {
  color: #9fc4dd !important;
  font-weight: 500 !important;
}

/* ---------- olho para ver a senha ----------
   O campo e um <input type="password">: o olho so troca o type para "text" e
   volta. Fica dentro do proprio campo, encostado na direita. */
.cj-vo-card .x-field { position: relative; }

/* O interior do campo e um degrade claro sobre o azul, entao um icone branco
   ficava com luminancia parecida com o fundo e sumia. A pastilha escura por
   tras garante o contraste em qualquer estado do campo. */
.cj-vo-olho {
  position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  color: #ffffff;
  background: rgba(3, 27, 62, .42);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(1, 30, 70, .30);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease;
}
.cj-vo-olho:hover  { background: rgba(3, 27, 62, .58); }
.cj-vo-olho:active { transform: translateY(-50%) scale(.88); }
.cj-vo-olho svg    { width: 21px; height: 21px; fill: currentColor;
                     filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* senha a mostra: o ciano do tema deixa o estado obvio */
.cj-vo-olho.aberto { color: #7fe3ff; background: rgba(3, 27, 62, .60); }

/* o corte aparece enquanto a senha esta escondida */
.cj-vo-olho .corte {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
}
.cj-vo-olho.aberto .corte { display: none; }

/* A folga para o texto digitado nao passar por baixo do olho e aplicada inline
   pelo login-cajueiro.js, e nao aqui: uma classe colocada no campo nao dura -
   o Ext reescreve o className do componente a cada mudanca de estado. */