:root{
  --navy-900:#0a1a2f;
  --navy-800:#0d2440;
  --teal-400:#1abc9c;
  --teal-300:#2dd4bf;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  height:100%;
  width:100%;
}

body{
  font-family:'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ===== PÁGINA CHEIA, LOGIN CENTRALIZADO ===== */
.page{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
}

/* moldura em volta do ícone, canto superior esquerdo */
.brand-frame{
  position:absolute;
  top:32px;
  left:61px;
  z-index:2;
  width:46px;
  height:46px;
  border:2px solid rgba(26,188,156,0.5);
  border-radius:12px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-icon{
  width:32px;
  height:32px;
  object-fit:contain;
}

.shape{
  position:absolute;
  z-index:2;
  border-radius:50%;
  border:2px solid rgba(26,188,156,0.5);
  pointer-events:none;
}

/* arco de bolinhas saindo do canto inferior direito, tipo bolha flutuando */
.shape-br-1{ right:-20px; bottom:190px; width:28px; height:28px; animation:float-a 7s ease-in-out infinite; }
.shape-br-2{ right:28px;  bottom:90px;  width:52px; height:52px; animation:float-b 9s ease-in-out infinite; }
.shape-br-3{ right:114px; bottom:28px;  width:26px; height:26px; animation:float-c 6s ease-in-out infinite; }
.shape-br-4{ right:186px; bottom:-18px; width:42px; height:42px; animation:float-a 8s ease-in-out infinite; }

/* um círculo grande saindo do canto superior direito, respirando */
.shape-tr-1{ top:-70px; right:-70px; width:160px; height:160px; animation:breathe 6s ease-in-out infinite; }

@keyframes breathe{
  0%,100%{ transform:scale(1); opacity:0.5; }
  50%{ transform:scale(1.06); opacity:0.85; }
}

/* arco de bolinhas saindo do canto inferior esquerdo, tipo bolha flutuando */
.shape-bl-1{ left:-20px; bottom:180px; width:26px; height:26px; animation:float-b 8s ease-in-out infinite; }
.shape-bl-2{ left:30px;  bottom:86px;  width:50px; height:50px; animation:float-c 7s ease-in-out infinite; }
.shape-bl-3{ left:112px; bottom:28px;  width:24px; height:24px; animation:float-a 6.5s ease-in-out infinite; }
.shape-bl-4{ left:176px; bottom:-18px; width:38px; height:38px; animation:float-b 9.5s ease-in-out infinite; }

@keyframes float-a{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(4px,-12px); }
}

@keyframes float-b{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-6px,-16px); }
}

@keyframes float-c{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(5px,-8px); }
}

@media (prefers-reduced-motion: reduce){
  .shape-br-1, .shape-br-2, .shape-br-3, .shape-br-4,
  .shape-bl-1, .shape-bl-2, .shape-bl-3, .shape-bl-4,
  .shape-tr-1{ animation:none; }
}

/* ===== FORMULÁRIO CENTRALIZADO ===== */
.form-side{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100vh;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 48px 120px;
}

.form-box{
  position:relative;
  width:100%;
  max-width:320px;
}

.bottom-actions{
  position:absolute;
  left:50%;
  bottom:280px;
  transform:translateX(-50%);
  width:100%;
  max-width:320px;
}

/* formulário de login/otp/admin */
.login-form{
  display:flex;
  flex-direction:column;
  gap:36px;
}

#adminForm{
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
}

.field{
  position:relative;
}

.field label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:#9aa1b1;
}

.field input{
  width:100%;
  padding:6px 2px 10px;
  border:none;
  border-bottom:1.5px solid var(--teal-400);
  font-size:15px;
  font-family:inherit;
  color:var(--navy-900);
  background:transparent;
  transition:border-color .15s;
}

.field input::placeholder{
  color:#c2c7d0;
}

.field input:focus{
  outline:none;
  border-bottom-color:var(--navy-900);
}

.otp-boxes{
  display:flex;
  gap:10px;
}

.field .otp-boxes input.otp-box{
  width:44px;
  padding:10px 0;
  border:1.5px solid #dfe3ea;
  border-bottom:1.5px solid #dfe3ea;
  border-radius:10px;
  text-align:center;
  font-size:20px;
  letter-spacing:0;
}

.field .otp-boxes input.otp-box:focus{
  border-color:var(--teal-400);
}

/* remove o fundo azul que o navegador aplica ao autopreencher */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--navy-900);
  transition:background-color 5000s ease-in-out 0s;
}

.login-form button{
  align-self:center;
  padding:12px 32px;
  border:none;
  border-radius:10px;
  background:#e3f7f2;
  color:#0f7a63;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.2px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(26,188,156,0.16);
  transition:background .15s, transform .15s, box-shadow .15s;
}

.login-form button:hover{
  background:#d3f1e9;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(26,188,156,0.22);
}

.login-form button:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(26,188,156,0.16);
}

.login-form button.back-link{
  position:absolute;
  top:-52px;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  background:none;
  border:none;
  border-radius:50%;
  box-shadow:none;
  padding:0;
  color:#9aa1b1;
  cursor:pointer;
  transition:background .15s, color .15s;
}

.back-link svg{
  width:18px;
  height:18px;
  stroke:currentColor;
}

.login-form button.back-link:hover{
  background:#f4f5f7;
  transform:none;
  box-shadow:none;
  color:var(--navy-900);
}

.status{
  font-size:13px;
  color:#5b6472;
  text-align:center;
}

.status:not(:empty){
  margin:22px 0 25px;
}

/* quando o formulário admin (email+senha) está aberto, o status precisa
   ficar abaixo da senha sem empurrar a altura da caixa (senão ela pula
   de tamanho e recentraliza tudo na hora que o texto aparece) */
.status.status-admin{
  position:absolute;
  top:122px;
  left:0;
  width:100%;
  margin:0;
}

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#9aa1b1;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin:22px 0;
}

.divider::before, .divider::after{
  content:"";
  flex:0 1 110px;
  height:1px;
  background:#e5e7eb;
}

.admin-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  border:1px solid #d0d5dd;
  background:#fff;
  color:var(--navy-900);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  padding:12px 16px;
  border-radius:10px;
  transition:border-color .15s, color .15s, background .15s;
}

.admin-btn svg{
  width:16px;
  height:16px;
  stroke:currentColor;
}

.admin-btn:hover{
  color:var(--teal-400);
  border-color:var(--teal-400);
  background:#f0fdfa;
}