/* =========================================================
   Login + animação de entrada
   Referências: "tela-login.png" e "Storyboard de Login LIDER BPO.png"
   ========================================================= */

body.tela-login {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(180deg, #e8f2fe 0%, #edf5fe 55%, #e4f0fd 100%);
}

/* ---------- Fundo decorativo ---------- */
.login-fundo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bolha, .onda { position: absolute; border-radius: 50%; }
.bolha-centro {
  width: 680px; height: 680px;
  left: 50%; top: -90px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(250, 253, 255, 0.95) 0%, rgba(243, 249, 255, 0.85) 55%, rgba(240, 247, 255, 0) 72%);
}
.bolha-esquerda {
  width: 860px; height: 860px;
  left: -460px; bottom: -440px;
  background: radial-gradient(circle at 62% 38%, #a8d4fb 0%, #6db8f8 45%, #4aa5f4 75%);
  box-shadow: 0 0 0 70px rgba(176, 214, 250, 0.35), 0 0 0 150px rgba(196, 225, 252, 0.25);
}
.bolha-direita {
  width: 360px; height: 360px;
  right: -160px; top: -200px;
  background: radial-gradient(circle at 30% 70%, #6db9f8 0%, #3c9ef2 70%);
  box-shadow: 0 0 0 60px rgba(186, 220, 252, 0.4);
}
.onda-1 {
  width: 1400px; height: 900px;
  right: -760px; top: 120px;
  border: 70px solid rgba(255, 255, 255, 0.45);
  filter: blur(6px);
}
.onda-2 {
  width: 1300px; height: 900px;
  left: -620px; top: 160px;
  border: 60px solid rgba(255, 255, 255, 0.35);
  filter: blur(8px);
}

/* ---------- Lema (esquerda) ---------- */
.login-lema {
  position: fixed;
  z-index: 1;
  left: 54px;
  top: 100px;
}
.login-lema ul { margin: 0; padding: 0; list-style: none; }
.login-lema li {
  padding: 8px 0 8px 24px;
  border-left: 2px solid rgba(30, 144, 255, 0.55);
  color: #2b6cb6;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.login-lema-traco { display: block; width: 40px; height: 4px; margin: 26px 0 26px 24px; border-radius: 4px; background: var(--azul-500); }
.login-lema p { padding-left: 24px; border-left: 2px solid rgba(30, 144, 255, 0.55); color: var(--marinho); font-size: 16px; line-height: 1.45; }

/* ---------- Frase manuscrita (inferior esquerda) ---------- */
.login-manuscrito {
  position: fixed;
  z-index: 1;
  left: 46px;
  bottom: 70px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 62px;
  line-height: 0.95;
  transform: rotate(-16deg);
  text-shadow: 0 2px 10px rgba(20, 90, 180, 0.15);
}
.login-manuscrito::after {
  content: "";
  display: block;
  width: 200px;
  height: 3px;
  margin: 14px 0 0 30px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
  transform: rotate(-6deg);
}

/* ---------- Assinatura (inferior direita) ---------- */
.login-assinatura {
  position: fixed;
  z-index: 1;
  right: 82px;
  bottom: 96px;
  padding-left: 28px;
  border-left: 2px solid var(--azul-600);
}
.login-assinatura::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--azul-500);
  box-shadow: 0 0 0 4px rgba(30, 144, 255, 0.18);
}
.login-assinatura strong { display: block; color: var(--marinho); font-size: 19px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 6px; }
.login-assinatura span { color: var(--marinho); font-size: 16px; line-height: 1.45; }

/* ---------- Área central ---------- */
.login-centro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 26px 16px 40px;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.login-centro.saindo { opacity: 0; transform: scale(0.98); filter: blur(2px); }
.login-logo { width: 282px; height: auto; margin-bottom: 8px; animation: surgir-cima 0.6s ease both; }

.login-card-area {
  position: relative;
  width: min(566px, 100%);
  margin-top: 226px; /* espaço do robô acima do card */
}

/* Robô "espiando" com as mãos na borda do card */
.login-robo {
  position: absolute;
  z-index: 3;
  left: 79px;
  bottom: calc(100% - 44px);
  width: 350px;
  pointer-events: none;
  animation: espiar 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.15s both;
}
.login-robo img { width: 100%; height: auto; }
.balao {
  position: absolute;
  left: 316px;
  top: 44px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 210px;
  padding: 20px 22px;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--sombra);
  color: var(--marinho);
  animation: balao 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.9s both;
}
.balao::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -14px;
  border: 14px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
  transform: skewX(-14deg);
}
.balao strong { font-size: 21px; font-weight: 700; }
.balao span { font-size: 17px; line-height: 1.45; }
.aceno { display: inline-block; transform-origin: 70% 80%; animation: acenar 2.2s ease-in-out 1.4s 2; }

/* Card de acesso */
.login-card {
  position: relative;
  z-index: 2;
  padding: 40px 44px 30px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(207, 223, 244, 0.7);
  box-shadow: 0 24px 60px rgba(30, 110, 210, 0.16);
  text-align: center;
  animation: surgir-baixo 0.6s ease 0.05s both;
}
.login-card h1 { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.login-sub { color: var(--texto-suave); font-size: 17px; line-height: 1.5; margin-bottom: 20px; }
.login-campos { display: grid; gap: 0; text-align: left; }
.login-campos .campo-erro { min-height: 14px; margin-top: 4px; }
.login-card .btn-lg { margin-top: 4px; font-size: 20px; }
.login-card .btn-lg .ico { width: 24px; height: 24px; transition: transform var(--transicao); }
.login-card .btn-lg:hover .ico { transform: translateX(4px); }

.calendario-oculto {
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  pointer-events: none;
}

.acesso-interno {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--azul-50);
  text-align: left;
}
.acesso-interno > .ico { width: 38px; height: 38px; color: var(--azul-600); }
.acesso-interno strong { display: block; color: var(--marinho); font-size: 15.5px; }
.acesso-interno span { color: var(--texto-suave); font-size: 15px; line-height: 1.4; }

.aviso-demo {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 13px;
}
.aviso-demo:hover { background: var(--azul-50); }
.aviso-demo u { color: var(--azul-700); text-underline-offset: 3px; }
.aviso-demo-selo {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--amarelo-bg);
  color: var(--amarelo);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Botão "Entrar" carregando */
#botao-entrar.carregando .ico { display: none; }

/* ---------- Animações de entrada da tela ---------- */
@keyframes surgir-cima { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes surgir-baixo { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes espiar { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes balao { from { opacity: 0; transform: scale(0.6) translateY(10px); transform-origin: 10% 100%; } to { opacity: 1; transform: none; } }
@keyframes acenar {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(16deg); }
  20%, 40% { transform: rotate(-8deg); }
}
@keyframes tremer { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.tremer { animation: tremer 0.4s ease; }

/* =========================================================
   ANIMAÇÃO APÓS O LOGIN (storyboard etapas 2 a 6)
   data-etapa: 1 acessando · 2 validando · 3 tudo certo · 4 sucesso · 5 transição
   ========================================================= */
.entrada {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(560px 420px at 50% 42%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #e2eefd 0%, #f2f8ff 55%, #e3effd 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.entrada.visivel { opacity: 1; }
.entrada.saindo { opacity: 0; transition-duration: 0.5s; }

.entrada-palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(460px, 100%);
  text-align: center;
}
.entrada-logo { width: 196px; height: auto; margin-bottom: 18px; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.7s ease; }

.entrada-cena { position: relative; width: 300px; height: 230px; margin-bottom: 12px; }
.cena-robo {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 168px;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 22px rgba(12, 70, 160, 0.2));
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
  animation: robo-respirar 2.6s ease-in-out infinite;
}
@keyframes robo-respirar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.cena-halo {
  position: absolute;
  left: 50%; bottom: -6px;
  width: 260px; height: 260px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(140, 200, 255, 0.4), rgba(140, 200, 255, 0) 65%);
}
/* órbita tracejada (etapa 1) */
.cena-orbita {
  position: absolute;
  left: 50%; top: 18px;
  width: 270px; height: 200px;
  border: 2px dashed rgba(30, 144, 255, 0.45);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: girar-lento 14s linear infinite;
}
@keyframes girar-lento { to { transform: translateX(-50%) rotate(360deg); } }
/* anel brilhante (etapa 2) */
.cena-anel {
  position: absolute;
  left: 50%; bottom: 8px;
  width: 250px; height: 70px;
  border-radius: 50%;
  border: 3px solid rgba(80, 180, 255, 0.55);
  box-shadow: 0 0 22px rgba(80, 180, 255, 0.55), inset 0 0 18px rgba(80, 180, 255, 0.35);
  transform: translateX(-50%) scale(0.7);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s ease;
}

.cena-icone {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  color: var(--azul-600);
  box-shadow: var(--sombra);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.cena-icone .ico { width: 28px; height: 28px; }
.cena-icone-a { left: 0; top: 34px; }
.cena-icone-b { right: 0; top: 34px; }
.cena-icone.e2 { background: var(--azul-100); }

.cena-escudo,
.cena-sucesso {
  position: absolute;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.cena-escudo {
  left: 50%; bottom: 34px;
  width: 78px; height: 78px;
  margin-left: -39px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(90, 185, 255, 0.95), rgba(20, 120, 240, 0.95));
  color: #fff;
  box-shadow: 0 10px 26px rgba(20, 120, 240, 0.45), 0 0 0 6px rgba(140, 205, 255, 0.35);
}
.cena-escudo .ico { width: 46px; height: 46px; }
.cena-sucesso {
  right: 6px; top: 26px;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3fd3c2, #12b0a0);
  color: #fff;
  box-shadow: 0 10px 26px rgba(18, 176, 160, 0.45), 0 0 0 10px rgba(63, 211, 194, 0.18);
}
.cena-sucesso .ico { width: 40px; height: 40px; stroke-width: 2.6; }

/* confete (etapa 3) */
.cena-confete { position: absolute; inset: 0; pointer-events: none; }
.cena-confete i {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 9px;
  height: 15px;
  margin-left: -4px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
}
.entrada[data-etapa="3"] .cena-confete i {
  animation: confete 1.3s cubic-bezier(0.15, 0.7, 0.3, 1) var(--d) forwards;
}
@keyframes confete {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.6); }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}

.entrada-titulo { font-size: 24px; font-weight: 700; margin-bottom: 6px; transition: opacity 0.2s ease; }
.entrada-sub { color: var(--texto-suave); font-size: 15px; min-height: 22px; transition: opacity 0.2s ease; }
.troca .entrada-titulo, .troca .entrada-sub, .troca #entrada-dica { opacity: 0; }

.entrada-progresso { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 340px; margin: 18px 0 22px; transition: opacity 0.4s ease, max-width 0.5s ease; }
.entrada-barra { flex: 1; height: 12px; border-radius: 12px; background: var(--azul-150); overflow: hidden; transition: height 0.4s ease; }
.entrada-barra span { display: block; width: 0; height: 100%; border-radius: 12px; background: var(--grad-primario); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.entrada-pct { min-width: 40px; color: var(--marinho); font-size: 14px; font-weight: 700; text-align: right; }

.entrada-dica {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 270px;
  padding: 12px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--borda);
  color: var(--texto);
  font-size: 13.5px;
  text-align: left;
  line-height: 1.4;
}
.entrada-dica-icone { display: grid; color: var(--azul-600); }
.entrada-dica-icone .ico { display: none; width: 28px; height: 28px; grid-area: 1 / 1; }
#entrada-dica { transition: opacity 0.2s ease; }

/* ---- estados por etapa ---- */
.entrada[data-etapa="1"] .cena-orbita { opacity: 1; }
.entrada[data-etapa="1"] .cena-icone.e1,
.entrada[data-etapa="2"] .cena-icone.e2 { opacity: 1; transform: none; }
.entrada[data-etapa="1"] .cena-icone.e1 { animation: boiar 2.4s ease-in-out 0.4s infinite; }
.entrada[data-etapa="1"] .cena-icone-b.e1 { animation-delay: 1.2s; }
@keyframes boiar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.entrada[data-etapa="2"] .cena-anel { opacity: 1; transform: translateX(-50%) scale(1); }
.entrada[data-etapa="2"] .cena-escudo { opacity: 1; transform: none; }

.entrada[data-etapa="3"] .cena-robo { animation: robo-comemorar 0.6s ease-in-out 2; }
@keyframes robo-comemorar { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -16px; rotate: -4deg; } 60% { translate: 0 -8px; rotate: 4deg; } }

.entrada[data-etapa="4"] .cena-sucesso { opacity: 1; transform: none; }
.entrada[data-etapa="4"] .cena-robo { transform: translateX(-72%); }

.entrada[data-etapa="5"] .entrada-logo { width: 236px; transform: translateY(120px); }
.entrada[data-etapa="5"] .cena-robo { opacity: 0.12; filter: blur(2px); }
.entrada[data-etapa="5"] .cena-halo { opacity: 0.4; }
.entrada[data-etapa="5"] .entrada-titulo { opacity: 0; }
.entrada[data-etapa="5"] .entrada-progresso { max-width: 170px; }
.entrada[data-etapa="5"] .entrada-barra { height: 4px; }
.entrada[data-etapa="5"] .entrada-pct { display: none; }

.entrada[data-etapa="1"] .entrada-dica-icone .d1,
.entrada[data-etapa="2"] .entrada-dica-icone .d2,
.entrada[data-etapa="3"] .entrada-dica-icone .d3,
.entrada[data-etapa="4"] .entrada-dica-icone .d4,
.entrada[data-etapa="5"] .entrada-dica-icone .d5 { display: block; }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .login-lema, .login-assinatura { display: none; }
  .login-manuscrito { font-size: 48px; left: 24px; bottom: 40px; opacity: 0.8; }
}
@media (max-height: 900px) and (min-width: 721px) {
  .login-centro { padding-top: 14px; }
  .login-logo { width: 230px; }
  .login-card-area { margin-top: 196px; }
  .login-robo { width: 300px; left: 112px; bottom: calc(100% - 38px); }
  .balao { left: 270px; top: 30px; padding: 16px 18px; width: 190px; }
  .login-card { padding: 32px 40px 22px; }
  .login-sub { margin-bottom: 16px; }
  .acesso-interno { margin-top: 18px; padding: 14px 18px; }
}
@media (max-width: 720px) {
  .login-manuscrito { display: none; }
  .bolha-esquerda { width: 520px; height: 520px; left: -300px; bottom: -330px; }
  .login-centro { padding-top: 20px; }
  .login-logo { width: 200px; }
  .login-card-area { margin-top: 168px; }
  .login-robo { width: 250px; left: 50%; margin-left: -150px; bottom: calc(100% - 31px); }
  .balao { left: 196px; top: 0; width: 150px; padding: 12px 14px; border-radius: 18px; }
  .balao strong { font-size: 17px; }
  .balao span { font-size: 13.5px; }
  .login-card { padding: 30px 20px 20px; border-radius: 22px; }
  .login-card h1 { font-size: 25px; }
  .login-sub { font-size: 15px; }
  .login-sub br { display: none; }
  .acesso-interno { gap: 14px; padding: 14px; }
  .acesso-interno span br { display: none; }
  .campo { padding: 0 14px; gap: 10px; }
  .campo input { font-size: 15px; }
}
@media (max-width: 380px) {
  .balao { display: none; }
}