/* recuperar.css */
/* ——— RESET BÁSICO ——— */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%;
  font-family:'Poppins',sans-serif;
  background: linear-gradient(135deg, #7209B7 0%, #3A0CA3 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* ——— CONTAINER CENTRAL ——— */
.recover-page {
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

/* ——— CARD ——— */
.recover-card {
  background:#fff;
  border-radius:16px;
  padding:2rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  width:100%;
  max-width:400px;
  text-align:center;
}

/* ——— PASSOS ——— */
.step { display:none; }
.step.active { display:block; }

/* ——— TÍTULOS ——— */
.step h2 {
  font-size:1.4rem;
  color:#3A0CA3;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
}

/* ——— PARÁGRAFOS ——— */
.step p {
  color:#555;
  margin-bottom:1rem;
}

/* ——— INPUTS ——— */
.step input {
  width:100%;
  padding:0.75rem 1rem;
  margin-bottom:1rem;
  border:2px solid #e0e0e0;
  border-radius:8px;
  font-size:1rem;
  transition:border-color 0.3s;
}
.step input:focus {
  outline:none;
  border-color:#7209B7;
}

/* ——— BOTÕES ——— */
.btn-submit {
  width:100%;
  padding:0.75rem;
  background: linear-gradient(135deg, #FF4F79 0%, #FFC0CB 100%);
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition: background 0.3s;
}
.btn-submit:hover {
  background:#e03e67;
}

/* ——— MENSAGEM DINÂMICA ——— */
.mensagem {
  display:none;
  margin-bottom:1rem;
  padding:0.75rem 1rem;
  border-radius:8px;
  font-weight:500;
  text-align:center;
}
.mensagem.sucesso {
  background:#d1f3d1;
  color:#2f8f2f;
  border:1px solid #a4e5a4;
}
.mensagem.erro {
  background:#ffe1e1;
  color:#c22;
  border:1px solid #f3aaaa;
}

/* ——— LAYOUT PARA TABLET E DESKTOP ——— */
@media (min-width:768px) {
  /* expande o body */
  html, body { overflow:auto; }
  .recover-card {
    margin:2rem 0;
  }
}
