@charset "utf-8";

/* ====== RESETEO Y FUENTE ====== */
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  background-color: #2e4639; /* verde oscuro */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
}

/* ====== CONTENEDOR PRINCIPAL ====== */
.contenedor-registro {
  position: relative;
  width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ====== ICONO VOLVER (ESPACIO PARA SVG) ====== */
.icono-volver {
  position: absolute;
  top: 80px;
  left: 25px;
  width: 60px; /* más grande */
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ====== PANEL VERDE CLARO ====== */
.panel-verde {
  background-color: #d5e7b3;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  width: 100%;
  height: calc(100vh - 60px); /* ahora comienza más arriba */
  margin-top: 180px; /* espacio justo debajo de la flecha */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* contenido arriba */
  box-sizing: border-box;
  padding-top: 50px; /* más cerca del título */
}

/* ====== CONTENIDO CENTRADO ====== */
.contenido-form {
  width: 100%;
  max-width: 300px;
  text-align: center;
}

/* ====== TÍTULO ====== */
.contenido-form h1 {
  font-weight: 600;
  color: #2e4639;
  margin-bottom: 25px;
}

/* ====== FORMULARIO ====== */
.formulario-registro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ====== CAMPOS DE TEXTO ====== */
.formulario-registro input {
  padding: 13px 16px;
  border: none;
  border-radius: 25px;
  outline: none;
  font-size: 15px;
  background-color: #ffffff;
}

/* ====== SEPARADOR ====== */
.formulario-registro hr {
  border: none;
  border-top: 2px solid #a7c58c;
  margin: 18px 0;
}

/* ====== BOTÓN REGISTRARSE ====== */
.btn-registrarse {
  background-color: #f6a94b; /* naranja */
  color: white;
  border: none;
  border-radius: 30px;
  padding: 15px;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  transition: background-color 0.3s ease;
}

.btn-registrarse:hover {
  background-color: #f8b764;
}