/* ===== BASE ===== */


*,
*::before,
*::after {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Inter", Arial, sans-serif;
  background: #050407; /* dark global */
}

.login-body {
  height: 100%;
}

/* Agora o wrapper não é mais flex, é um "trilho" para as portas */
.login-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Classe que indica que estamos no modo EXTERNO */
.login-wrapper.mode-external {}

/* ===== LADO ESQUERDO (FUNDO VERDE / PARTICULAS) ===== */

.login-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;           /* começa colado na esquerda */
  width: 70%;        /* lado maior */
  overflow: hidden;
  background: #021d12; /* verde escuro elegante */
  transition: left 0.6s ease;  /* anima como porta */
}

/* Quando for EXTERNO, o lado verde desliza para a direita
   (ele passa a ocupar de 30% até 100%) */
.login-wrapper.mode-external .login-left {
  left: 30%;
}

.login-left {
  clip-path: inset(0 0 0 0);
}


/* Canvas das partículas */
#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Fumaça suave – camada 1 e 2 */
.smoke,
.smoke2 {
  position: absolute;
  inset: 0;
  filter: blur(60px);
  z-index: 2;
  opacity: 0.6;
  pointer-events: none;
}

/* foco mais à esquerda/superior */
.smoke {
  background: radial-gradient(
    circle at 30% 35%,
    rgba(0, 255, 150, 0.18),
    transparent 55%
  );
  animation: float1 18s infinite linear;
}

/* foco mais à direita/inferior */
.smoke2 {
  background: radial-gradient(
    circle at 70% 65%,
    rgba(0, 180, 120, 0.20),
    transparent 55%
  );
  animation: float2 22s infinite linear;
}

/* Overlay se quiser (não está no HTML, mas deixei) */
.login-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ===== TEXTO CENTRALIZADO DO LADO ESQUERDO ===== */

.left-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  color: #ffffff;
  padding: 20px 28px;
}

.left-title h1 {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.65);
}

.left-title p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  opacity: 0.9;
  letter-spacing: 1px;
  color: #d6ffe7;
}

/* ===== ANIMAÇÕES DA FUMAÇA ===== */

@keyframes float1 {
  0%   { transform: translate(-10%, 0)    scale(1); }
  50%  { transform: translate(10%, -5%)   scale(1.15); }
  100% { transform: translate(-10%, 0)    scale(1); }
}

@keyframes float2 {
  0%   { transform: translate(10%, 10%)   scale(1.1); }
  50%  { transform: translate(-5%, -10%)  scale(1); }
  100% { transform: translate(10%, 10%)   scale(1.1); }
}

/* ===== LADO DIREITO (FORMULÁRIO) ===== */

.login-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30%;
  background: #050407;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  transition: right 0.6s ease; /* anima como porta */
  /* REMOVA ESTA LINHA: */
  /* box-shadow: -8px 0 18px rgba(0, 0, 0, 0.6); */
}

/* Quando for EXTERNO, o formulário desliza para a esquerda
   (passa a ocupar de 0% até 30%) */
.login-wrapper.mode-external .login-right {
  right: 70%;
}

.login-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
  color: #e0e0e0;
}

/* Logo */
.logo {
  width: 190px;
  margin-bottom: 22px;
}


/* ===== INPUTS ===== */

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 6px;
  border: 1px solid #2a2a2f;
  background: #111015;
  color: #f1f1f1;
  font-size: 16px;
  transition: all 0.2s;
}

input::placeholder {
  color: #9a9a9a;
}

input:focus {
  border-color: #6547ff;
  background: #18171d;
  outline: none;
}

/* ===== OPÇÕES ===== */

.login-opcoes {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 18px;
  color: #c4c4c4;
}

.login-opcoes a {
  color: #8b7cff;
  text-decoration: none;
}

/* ===== BOTÃO LOGIN ===== */

.btn-login {
  width: 100%;
  padding: 14px;
  background: #6547ff;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  margin-top: 6px;
  transition: 0.2s;
}

.btn-login:hover {
  background: #5237e0;
}

/* ===== TEXTO CADASTRO ===== */

.cadastro {
  margin-top: 18px;
  font-size: 14px;
  color: #c4c4c4;
}

.cadastro a {
  color: #8b7cff;
  text-decoration: none;
}

/* ===== BOTÃO SWITCH PORTAL ===== */

.btn-switch-portal {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #2a2a2f;
  background: transparent;
  color: #cfcfff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-switch-portal:hover {
  background: #111015;
  border-color: #6547ff;
  color: #ffffff;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 900px) {
  .login-wrapper {
    height: auto;
  }

  .login-left {
    display: none;
  }

  .login-right {
    position: relative;
    right: auto;
    left: 0;
    top: auto;
    bottom: auto;
    width: 100%;
    padding: 24px 16px;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .login-card {
    width: 100%;
    max-width: 420px;   /* um pouco mais largo pro mobile */
    margin: 0 auto;
    text-align: center;
  }

  input[type="email"],
  input[type="password"] {
    display: block;
    width: 100%;
  }
}

/* ===== AVISO PORTAL EXTERNO ===== */

.portal-warning {
  display: none;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 6px;
  background: #1b151b;
  border: 1px solid #3b2b6b;
  color: #f5d3ff;
  text-align: left;
}

.portal-warning a {
  color: #b39cff;
  text-decoration: underline;
}

/* Quando estiver em modo externo, o card fica "desabilitado"
   e o aviso aparece */
.login-card.external-disabled form {
  opacity: 0.45;
  filter: grayscale(0.2);
  pointer-events: none;
}

.login-card.external-disabled .btn-login {
  cursor: not-allowed;
}

.login-card.external-disabled .portal-warning {
  display: block;
}