/* ======================================================
   /assets/css/auth-split.css
   Popper Conecta — Login Split (roxo Popper, sem faixa azul)
====================================================== */
body.auth-split{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
/* Paleta Popper + tokens */
:root{
  --popper-purple: #5b2a86;      /* roxo principal (Popper) */
  --popper-purple-2: #6a35a0;    /* roxo médio */
  --popper-purple-3: #7a45c0;    /* roxo claro */

  --popper-pink:  #d1004f;
  --popper-green: #9bc53d;

  --popper-bg: #f5f6fb;

  --radius-xl: 24px;
  --shadow-soft: 0 30px 80px rgba(15,23,42,.18);
  --shadow-card: 0 18px 50px rgba(15,23,42,.12);
  --border-soft: rgba(255,255,255,.55);
  --muted: rgba(15,23,42,.66);
  --field-border: rgba(15,23,42,.10);
}

/* PAGE */
body.auth-split{
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(91,42,134,.18), transparent 60%),
    radial-gradient(900px 700px at 80% 70%, rgba(122,69,192,.14), transparent 55%),
    var(--popper-bg);
}

/* WRAP */
.auth-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 18px;
}

/* PANEL */
.auth-panel{
  width: min(1120px, 100%);
  min-height: 560px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

/* ======================================================
   LEFT — BRAND (POPPER)
====================================================== */

.auth-left{
  position:relative;
  overflow:hidden;
  padding:56px;
  display:flex;
  align-items:center;
  justify-content:flex-start;

  /* Roxo Popper contínuo (sem faixa azul) */
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(800px 500px at 90% 90%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(
      135deg,
      var(--popper-purple-3) 0%,
      var(--popper-purple) 45%,
      #4a1f73 100%
    );
}

/* Conteúdo */
.auth-brand{
  position:relative;
  z-index:3;
  max-width:520px;
  margin-top:-40px; /* sobe o texto */
}

.auth-brand__title{
  font-size:54px;
  line-height:1.05;
  font-weight:900;
  color:#ffffff;       /* como no seu mock (texto escuro) */
  margin:0 0 18px;
  letter-spacing:-1px;
}

.auth-brand__subtitle{
  font-size:15px;
  color:rgba(255,255,255,.92);
  line-height:1.6;
  max-width:420px;
  margin:0;
}

/* Shapes */
.popper-shape{
  position:absolute;
  border-radius:50%;
  filter: blur(60px);
  opacity:.16;
  background:#fff;
  z-index:1;
}

.popper-shape--1{
  width:320px;
  height:320px;
  top:-140px;
  left:-140px;
}

.popper-shape--2{
  width:260px;
  height:260px;
  bottom:-120px;
  right:-120px;
}

/* ======================================================
   RIGHT — LOGIN CARD
====================================================== */

.auth-right{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 46px 34px;
  background: rgba(255,255,255,.92);
}

.auth-card{
  width: min(420px, 100%);
}

/* Logo topo */
.auth-logo-top{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 18px;
}

.auth-logo-top img{
  width: 220px;
  max-width: 80%;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 12px 24px rgba(15,23,42,.18));
}

/* Header */
.auth-card__header{
  margin-bottom: 16px;
}

.auth-card__title{
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.5px;
}

.auth-card__desc{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Alert erro */
.auth-alert{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.22);
  background: rgba(239,68,68,.08);
  color: rgba(127,29,29,.95);
  margin: 14px 0 10px;
}
.auth-alert__icon{ margin-top: 2px; }
.auth-alert__text{ font-size: 13px; line-height: 1.35; }

/* Form */
.auth-form{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.auth-field{ display:block; }

.auth-field__label{
  display:block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.78);
  margin: 0 0 6px;
}

.auth-field__control{
  display:flex;
  align-items:center;
  gap: 10px;
  height: 46px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--field-border);
  padding: 0 14px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.auth-field__icon{
  color: rgba(15,23,42,.45);
}

.auth-input{
  width: 100%;
  border: 0;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: var(--text);
}
.auth-input::placeholder{
  color: rgba(15,23,42,.35);
}

/* Row */
.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 2px;
}

.auth-check{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  color: rgba(15,23,42,.70);
  user-select:none;
}
.auth-check input{ transform: translateY(1px); }

.auth-link{
  font-size: 12px;
  color: var(--popper-purple);
  text-decoration:none;
  font-weight: 800;
}
.auth-link:hover{ text-decoration: underline; }

.auth-btn{
  height:48px;
  border:0;
  border-radius:999px;

  /* tipografia moderna */
  font-family:'Inter', sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;

  color:#fff !important; 
  cursor:pointer;

  /* gradiente Popper refinado */
  background:linear-gradient(
    90deg,
    #5b2a86 0%,
    #7a45c0 100%
  );

  box-shadow:
    0 10px 24px rgba(91,42,134,.28),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition: all .25s ease;
}

/* hover moderno */
.auth-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px rgba(91,42,134,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* clique */
.auth-btn:active{
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(91,42,134,.25);
}
.auth-btn:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.auth-btn:active{ transform: translateY(0px); }

/* Footer */
.auth-footer{
  margin-top: 14px;
  text-align:center;
}
.auth-footer__text{
  display:block;
  font-size: 12px;
  color: rgba(15,23,42,.52);
}

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

@media (max-width: 980px){
  .auth-panel{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-left{
    padding: 44px 24px;
    text-align:center;
    justify-content:center;
  }

  .auth-brand{
    margin-top:-10px;
    max-width: 560px;
  }

  .auth-brand__title{
    font-size: 38px;
    color: #f5f6fb;
  }

  .popper-grid{
    display:none;
  }

  .auth-right{
    padding: 28px 18px 34px;
  }

  .auth-logo-top img{
    width: 180px;
  }
}

/* ======================================================
   INPUT FOCUS — ICON HOVER ROXO
====================================================== */

/* transição suave */
.auth-field__control{
  transition: all .25s ease;
}

.auth-field__icon{
  transition: all .25s ease;
}

/* quando clicar no campo */
.auth-field__control:focus-within{
  border-color: #5b2a86;
  box-shadow:
    0 0 0 3px rgba(91,42,134,.12),
    0 10px 22px rgba(15,23,42,.06);
}

/* ÍCONE FICA ROXO */
.auth-field__control:focus-within .auth-field__icon{
  color:#5b2a86;
  transform: scale(1.08);
}

/* input ativo */
.auth-input:focus{
  outline:none;
}

/* ======================================================
   WELCOME STYLE (igual imagem enviada)
====================================================== */

.auth-brand--welcome{
  font-family:'Poppins', sans-serif;
  max-width:520px;
}

.auth-brand--welcome .auth-brand__title{
  font-size:56px;
  font-weight:700;
  color:rgba(255,255,255,.85); /* mesma cor do texto de baixo */
  letter-spacing:-0.5px;
  line-height:1.05;
  margin:0 0 18px;
}

/* SUBTÍTULO */
.auth-brand--welcome .auth-brand__subtitle{
  font-size:18px;
  font-weight:400;
  color:rgba(255,255,255,.85);
  line-height:1.6;
  margin:0;
}

/* RESPONSIVO */
@media (max-width:980px){

  .auth-brand--welcome .auth-brand__title{
    font-size:40px;
  }

  .auth-brand--welcome .auth-brand__subtitle{
    font-size:16px;
  }
}
.auth-brand--welcome .auth-brand__subtitle{
  font-size:18px;
  font-weight:400;
  color:rgba(255,255,255,.85) !important;
  line-height:1.6;
}
/* ======================================================
   FIX COR DO TITULO (WELCOME BACK)
====================================================== */

.auth-brand--welcome .auth-brand__title{
  color: rgba(255,255,255,.85) !important;
}

/* ======================================================
   TRANSIÇÃO DISCRETA AO LOGAR
====================================================== */

.auth-wrap{
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}

body.is-leaving .auth-wrap{
  opacity: .0;
  filter: blur(2px);
  transform: translateY(-4px);
}

body.is-leaving{
  cursor: progress;
}

/* botão em loading */
.auth-btn.is-loading{
  opacity: .92;
  pointer-events: none;
}

.auth-btn.is-loading::after{
  content:"Entrando…";
  font-weight: 700;
  letter-spacing: .2px;
}

/* ======================================================
   FIX TITULO WELCOME (COR + FONTE IGUAL SUBTITULO)
====================================================== */

.auth-brand--welcome{
  font-family: 'Poppins', sans-serif;
}

/* título */
.auth-brand--welcome .auth-brand__title{
  font-family: inherit !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* subtítulo */
.auth-brand--welcome .auth-brand__subtitle{
  font-family: inherit !important;
  color: #ffffff !important;
}

/* ======================================================
   BOTÃO ENTRAR — FIX COR + FONTE
====================================================== */

.auth-btn{
  height:48px;
  border:0;
  border-radius:999px;

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

  font-family:'Poppins', sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.2px;

  color:#ffffff !important;   /* ← FORÇA BRANCO */
  text-decoration:none;

  background:linear-gradient(
    90deg,
    #5b2a86 0%,
    #7a45c0 100%
  );

  box-shadow:
    0 12px 28px rgba(91,42,134,.28),
    inset 0 1px 0 rgba(255,255,255,.25);

  cursor:pointer;
  transition: all .25s ease;
}

/* garante que texto interno fique branco */
.auth-btn,
.auth-btn span{
  color:#ffffff !important;
}

/* hover moderno */
.auth-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

/* clique */
.auth-btn:active{
  transform:translateY(0);
}

/* saída discreta */
.auth-wrap{
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
body.is-leaving .auth-wrap{
  opacity: 0;
  filter: blur(2px);
  transform: translateY(-4px);
}

/* loading do botão */
.auth-btn.is-loading{
  pointer-events:none;
  opacity:.92;
}