.pagina-autenticacao {
  --azul-neon: #60a5fa;
  --roxo-neon: #a78bfa;
  --verde-neon: #4ade80;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
  background: #050810;
}

.pagina-autenticacao::before {
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(550px) rotateX(58deg) scale(1.7) translateY(18%);
  transform-origin: bottom;
  animation: gridTravel 12s linear infinite;
}

.pagina-autenticacao::after {
  background:
    radial-gradient(circle at 24% 48%, rgba(37, 99, 235, 0.2), transparent 31%),
    radial-gradient(circle at 78% 12%, rgba(139, 92, 246, 0.1), transparent 28%);
  animation: atmosphere 8s ease-in-out infinite alternate;
}

.auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 55% 45%;
  width: 100%;
  min-height: 100vh;
}
.auth-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7vw;
  overflow: hidden;
}
.auth-showcase::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 0;
  width: 1px;
  height: 84%;
  background: linear-gradient(
    transparent,
    rgba(96, 165, 250, 0.5),
    rgba(167, 139, 250, 0.35),
    transparent
  );
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.55);
}

.brand-lockup {
  position: absolute;
  top: 42px;
  left: 7vw;
  display: flex;
  align-items: center;
  gap: 13px;
}
.brand-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
}
.brand-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(96, 165, 250, 0.5);
  transform: rotate(45deg);
  animation: logoSpin 8s linear infinite;
}
.brand-logo img {
  width: 28px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.75));
}
.brand-lockup h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
}
.eyebrow,
.etapa {
  display: block;
  color: var(--azul-neon);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.showcase-copy {
  position: relative;
  z-index: 2;
  max-width: 570px;
  transform: translateY(-75px);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.status-pill > span {
  width: 29px;
  height: 1px;
  background: var(--azul-neon);
  box-shadow: 0 0 9px var(--azul-neon);
}
.showcase-copy h2 {
  color: #f8fafc;
  font-family: var(--fonte-destaque);
  font-size: clamp(45px, 5.2vw, 76px);
  line-height: 0.89;
  letter-spacing: -1.5px;
  text-wrap: balance;
}
.showcase-copy p {
  max-width: 500px;
  margin-top: 25px;
  color: #9aacbf;
  font-size: 15px;
}

.career-orbit {
  position: absolute;
  right: 7%;
  bottom: -50px;
  width: min(40vw, 510px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.orbit {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 50%;
  transform: rotate(-18deg) scaleY(0.42);
}
.orbit--one {
  animation: orbitTilt 7s ease-in-out infinite alternate;
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.08);
}
.orbit--two {
  inset: 24%;
  border-color: rgba(167, 139, 250, 0.2);
  transform: rotate(38deg) scaleY(0.55);
  animation: orbitTiltTwo 9s ease-in-out infinite alternate;
}
.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(96, 165, 250, 0.55);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.24),
    rgba(5, 8, 16, 0.85) 65%
  );
  box-shadow:
    0 0 40px rgba(37, 99, 235, 0.25),
    inset 0 0 28px rgba(96, 165, 250, 0.12);
  transform: translate(-50%, -50%);
  animation: corePulse 3s ease-in-out infinite;
}
.orbit-core img {
  width: 38px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.8));
}
.skill-node {
  position: absolute;
  z-index: 2;
  padding-left: 18px;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.skill-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  transform: translateY(-50%);
  animation: nodePulse 2s ease-in-out infinite;
}

.auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vw;
  background: linear-gradient(
    90deg,
    rgba(5, 8, 16, 0.32),
    rgba(8, 13, 26, 0.92)
  );
}
.auth-panel::before {
  content: "ACESSO";
  position: absolute;
  top: 50%;
  right: -48px;
  color: rgba(255, 255, 255, 0.022);
  font-family: var(--fonte-destaque);
  font-size: 150px;
  font-weight: 700;
  letter-spacing: 12px;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}
.pagina-cadastro .auth-panel::before {
  content: "PERFIL";
}
.auth-card__header,
.auth-form,
.auth-switch {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
}
.auth-card__header {
  margin-bottom: 35px;
}
.auth-card__header h2 {
  margin-top: 10px;
  color: #f8fafc;
  font-family: var(--fonte-destaque);
  font-size: 38px;
  line-height: 1;
}
.auth-card__header p {
  margin-top: 12px;
  color: var(--cor-texto-suave);
  font-size: 13px;
}
.auth-form {
  display: grid;
  gap: 24px;
}
.campo label {
  display: block;
  margin-bottom: 7px;
  color: #8291a6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.input-wrap {
  position: relative;
}
.input-icon {
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  transform: translateY(-50%);
  transition: 0.25s;
}
.input-wrap input {
  width: 100%;
  padding: 14px 12px 14px 37px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0;
  outline: none;
  color: #fff;
  background: transparent;
  font: 14px var(--fonte-texto);
  transition: 0.3s;
}
.input-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--azul-neon), var(--roxo-neon));
  box-shadow: 0 0 10px var(--azul-neon);
  transition: width 0.38s ease;
}
.input-wrap:focus-within::after {
  width: 100%;
}
.input-wrap:focus-within .input-icon {
  color: var(--azul-neon);
  text-shadow: 0 0 9px var(--azul-neon);
  transform: translateY(-50%) scale(1.12);
}
.input-wrap input::placeholder {
  color: #475569;
}
.campos-duplos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.auth-actions {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-top: 8px;
}
.auth-actions button {
  margin: 0;
}
.auth-actions .btn-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(260px, 100%);
  border-radius: 2px 18px 2px 18px;
  clip-path: polygon(
    0 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% 100%,
    15px 100%,
    0 calc(100% - 15px)
  );
}
.auth-actions .btn-main span {
  font-size: 19px;
  transition: transform 0.25s;
}
.auth-actions .btn-main:hover span {
  transform: translateX(5px);
}
.auth-actions .btn-sec {
  width: auto;
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #64748b;
  font-size: 12px;
}
.auth-actions .btn-sec:hover {
  border-color: #64748b;
  transform: none;
}
.auth-switch {
  margin-top: 34px;
  color: #64748b;
  font-size: 12px;
}
.auth-switch a,
.termo a {
  color: var(--azul-neon);
  font-weight: 700;
  text-decoration: none;
}
.auth-switch a:hover,
.termo a:hover {
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}
.termo {
  color: #64748b;
  font-size: 11px;
}
.termo label {
  display: flex;
  gap: 9px;
  cursor: pointer;
}
.termo input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  accent-color: var(--cor-primaria);
}
.termo-texto {
  max-height: 84px;
  padding-left: 13px;
  overflow-y: auto;
  border-left: 1px solid var(--azul-neon);
  animation: revealTerm 0.3s ease;
}
.termo-texto p {
  color: #718096;
  font-size: 10px;
  line-height: 1.55;
}
.pagina-cadastro .auth-form {
  gap: 18px;
}
.pagina-cadastro .showcase-copy {
  transform: translateY(-55px);
}

@keyframes gridTravel {
  to {
    background-position:
      0 56px,
      56px 0;
  }
}
@keyframes atmosphere {
  to {
    opacity: 0.62;
    transform: scale(1.08);
  }
}
@keyframes logoSpin {
  to {
    transform: rotate(405deg);
  }
}
@keyframes orbitTilt {
  to {
    transform: rotate(8deg) scaleY(0.5);
  }
}
@keyframes orbitTiltTwo {
  to {
    transform: rotate(62deg) scaleY(0.38);
  }
}
@keyframes corePulse {
  50% {
    box-shadow:
      0 0 65px rgba(37, 99, 235, 0.42),
      inset 0 0 36px rgba(96, 165, 250, 0.18);
    transform: translate(-50%, -50%) scale(1.04);
  }
}
@keyframes nodePulse {
  50% {
    opacity: 0.35;
    transform: translateY(-50%) scale(0.65);
  }
}
@keyframes revealTerm {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-showcase {
    min-height: 510px;
    padding: 110px 8vw 70px;
  }
  .auth-showcase::after {
    top: auto;
    right: 8%;
    bottom: 0;
    width: 84%;
    height: 1px;
  }
  .brand-lockup {
    left: 8vw;
  }
  .showcase-copy {
    transform: none;
  }
  .showcase-copy h2 {
    max-width: 590px;
    font-size: clamp(43px, 9vw, 66px);
  }
  .career-orbit {
    right: -70px;
    bottom: -155px;
    width: 430px;
    opacity: 0.8;
  }
  .auth-panel {
    min-height: 600px;
    padding: 80px 8vw;
  }
  .pagina-cadastro .auth-panel {
    min-height: 720px;
  }
}
@media (max-width: 560px) {
  .auth-showcase {
    min-height: 470px;
    padding-top: 105px;
  }
  .brand-lockup {
    top: 32px;
  }
  .showcase-copy h2 {
    font-size: 43px;
  }
  .showcase-copy p {
    font-size: 13px;
  }
  .career-orbit {
    right: -120px;
    bottom: -140px;
    width: 370px;
  }
  .skill-node {
    display: none;
  }
  .auth-panel {
    padding: 68px 24px;
  }
  .auth-panel::before {
    display: none;
  }
  .auth-card__header h2 {
    font-size: 34px;
  }
  .campos-duplos {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .auth-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .auth-actions .btn-main,
  .auth-actions .btn-sec {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-autenticacao::before,
  .pagina-autenticacao::after,
  .brand-logo::before,
  .orbit,
  .orbit-core,
  .skill-node::before {
    animation: none;
  }
}

/* =========================
   MOSTRAR / OCULTAR SENHA
========================= */

.senha-wrap input {
  padding-right: 48px;
}

/* Remove o botão nativo do Edge */
.senha-wrap input::-ms-reveal,
.senha-wrap input::-ms-clear {
  display: none;
}

.toggle-senha {
  position: absolute;
  z-index: 5;

  right: 4px;
  bottom: 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  padding: 0;
  margin: 0;

  border: none;
  border-radius: 50%;

  color: #64748b;
  background: transparent;

  cursor: pointer;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    filter 0.2s ease;
}

.toggle-senha:hover {
  color: var(--azul-neon);
  background: rgba(96, 165, 250, 0.08);
}

.toggle-senha:focus {
  outline: none;
}

.toggle-senha:focus-visible {
  outline: 1px solid rgba(96, 165, 250, 0.6);
}

/* Ícone */
.icone-olho {
  display: block;

  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

.toggle-senha:hover .icone-olho {
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.65));
}

/* Estado padrão */
.olho-aberto {
  display: block;
}

.olho-fechado {
  display: none;
}

/* Quando a senha estiver visível */
.toggle-senha.senha-visivel .olho-aberto {
  display: none;
}

.toggle-senha.senha-visivel .olho-fechado {
  display: block;
}

/* Mensagens de validação integradas ao login e cadastro. */
.auth-mensagem {
  min-height: 17px;
  margin: -4px 0 2px;
  color: #fb7185;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.auth-mensagem.ativo {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVIDADE — AUTENTICAÇÃO */
@media (max-width: 560px) {
  .auth-shell, .auth-card, .login-card, .register-card { width: 100%; max-width: 100%; }
  input, button { max-width: 100%; }
}