@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.body{
    font-family: FontAwesome;
}

.form-center {
  min-height: 100vh;
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  backdrop-filter: blur(2px);
  transition: background 0.4s ease;
}

.REGISTRO {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(16,16,40,0.08);
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.REGISTRO h2 {
  font-size: 30px;
  margin-bottom: 24px;
  color: #4a154b;
}

.field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.field label {
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: #6b5d6f;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 15px;
  text-align: center;
}

.field input:focus {
  border-color: #d224c0;
  outline: none;
  box-shadow: 0 8px 22px rgba(210,36,192,0.08);
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg,#d224c0,#9a0f86);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(154,15,134,0.12);
}

/* Pequeña interacción del botón */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(154,15,134,0.16);
}

.btn-primary:hover {
  background: linear-gradient(90deg, #c01eae, #820c6f);
}

/* Link inferior */
.signup-link {
  margin-top: 16px;
  font-size: 14px;
  color: #6b5d6f;
}

.signup-link a {
  color: #9a0f86;
  text-decoration: none;
  font-weight: 600;
}

.signup-link a:hover {
  text-decoration: underline;
}

/* Mensajes */
.form-error, .form-success {
  max-width:360px;
  margin: 0 auto 14px;
  padding:10px 12px;
  border-radius:8px;
  font-size:14px;
  text-align:center;
}
.form-error { background:#ffeef1; color:#8b1d2a; border:1px solid rgba(139,29,42,0.08); }
.form-success { background:#ecfff4; color:#1e6b3a; border:1px solid rgba(30,107,58,0.06); }

/* En móviles asegurar buen espaciado */
@media (max-width:480px) {
  .REGISTRO { padding: 22px; border-radius:12px; }
  .field input { font-size:15px; padding:12px; }
}