/* metanoIA — tela de login do App (smartphone e tablet)
   Usa css/metanoia.css como base; aqui ficam só o formulário e a composição. */

html, body { height: 100%; }
.scroll-soft::-webkit-scrollbar { width: 0; height: 0; }

.logo { width: auto !important; max-width: 100%; object-fit: contain; flex: none; }

/* linhas concêntricas — assinatura gráfica ("a mudança que parte de um centro") */
.applogin__rings {
  position: absolute;
  right: -190px;
  top: -190px;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(241, 127, 54, 0) 0 28px, rgba(241, 127, 54, .18) 28px 29px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 54%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 54%, transparent 78%);
}

/* composição: coluna centrada, confortável do 430px ao tablet */
.applogin__main { display: flex; }
.applogin__box {
  width: 100%;
  max-width: 430px;
  margin: auto;
  padding: 44px 28px 36px;
  display: flex;
  flex-direction: column;
}

.applogin__brand { display: flex; align-items: center; gap: 12px; }
.applogin__simbolo { height: 40px; }
.applogin__marca { height: 30px; }

.applogin__title {
  margin-top: 30px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.applogin__sub {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: #7C838C;
  text-wrap: pretty;
  max-width: 34ch;
}

/* ------------------------------------------------------------- formulário */
.applogin__form { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }

.applogin__alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #F5C6C0;
  background: #FDF1EF;
  color: #B03A2E;
  font-size: 13.5px;
  line-height: 1.45;
}
.applogin__alert.is-on { display: flex; }
.applogin__alert svg { flex: none; margin-top: 1px; }

.afield { position: relative; display: flex; flex-direction: column; gap: 7px; }
.afield label { font-size: 13.5px; font-weight: 600; color: #4D5560; }
.afield input {
  height: 54px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid #EDE3D7;
  background: #FFFFFF;
  font-size: 15px;
  color: #22272F;
  transition: border-color .15s, box-shadow .15s;
}
.afield input::placeholder { color: #A8A199; }
.afield input:focus {
  outline: none;
  border-color: #F7B183;
  box-shadow: 0 0 0 3px rgba(241, 127, 54, .12);
}
.afield--pass input { padding-right: 52px; }
.afield__toggle {
  position: absolute;
  right: 8px;
  top: 32px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #A8A199;
}
.afield__toggle:active { background: #FFF4E9; color: #D95A18; }
.afield__error { display: none; font-size: 12.5px; color: #B03A2E; }
.afield.is-error input { border-color: #E8A79E; }
.afield.is-error .afield__error { display: block; }

.applogin__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -2px;
}
.applogin__lembrar {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: #4D5560;
  cursor: pointer;
}
.applogin__lembrar input {
  appearance: none;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  border: 1.5px solid #DED6CC;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  flex: none;
}
.applogin__lembrar input::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 3px;
  transform: scale(0);
  transition: transform .12s;
  background: #F17F36;
}
.applogin__lembrar input:checked { border-color: #F7B183; }
.applogin__lembrar input:checked::before { transform: scale(1); }
.applogin__link { font-size: 13.5px; font-weight: 500; color: #D95A18; }

.applogin__entrar {
  margin-top: 6px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F27222, #E95016);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(233, 80, 22, .30);
  transition: filter .15s, transform .15s;
}
.applogin__entrar:active { filter: brightness(1.06); transform: translateY(1px); }
.applogin__entrar.is-loading { opacity: .75; pointer-events: none; }

.applogin__sep {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #A8A199;
  font-size: 13px;
}
.applogin__sep::before, .applogin__sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #F2ECE5;
}

.applogin__bio {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid #EDE3D7;
  background: #fff;
  font-size: 14.5px;
  font-weight: 600;
  color: #4D5560;
}
.applogin__bio:active { background: #FFF4E9; color: #D95A18; }
.applogin__hint {
  display: none;
  text-align: center;
  font-size: 12.5px;
  color: #A8A199;
}
.applogin__hint.is-on { display: block; }

.applogin__foot {
  margin-top: 28px;
  text-align: center;
  font-size: 13.5px;
  color: #7C838C;
}
.applogin__foot a { font-weight: 600; color: #D95A18; }

/* tablet: respiro maior, título mais generoso */
@media (min-width: 700px) {
  .applogin__box { max-width: 460px; padding-top: 64px; }
  .applogin__title { font-size: 40px; }
  .applogin__rings { right: -140px; top: -150px; width: 640px; height: 640px; }
}