@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;
}

/* Contenedor centrado en viewport */
.form-center {
  min-height: 100vh;
  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;
}

/* Tarjeta */
.REGISTRO {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 18px 40px rgba(16,16,40,0.08);
  border: 1px solid rgba(160,120,140,0.06);
  text-align: center;
}

/* Título */
.REGISTRO h2 {
  margin: 0 0 22px;
  font-size: 30px;
  color: #33183b;
}

/* Layout de campos: cada field ocupa 100% y está centrado */
.field {
  width: 100%;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Label encima, centrado y compacto */
.field label {
  width: 100%;
  text-align: left;   /* deja left para accesibilidad; visualmente queda alineado sobre cada input */
  font-size: 13px;
  color: #6b5d6f;
  margin-bottom: 6px;
  padding-left: 4px;
}

/* Inputs estilo moderno y texto centrado */
.field input[type="text"],
.field input[type="password"],
.field input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6d6e6;
  font-size: 15px;
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
  box-shadow: none;
  text-align: center;   /* <- texto centrado dentro del campo */
}

/* Foco claro y accesible */
.field input:focus {
  outline: none;
  border-color: #d224c0;
  box-shadow: 0 8px 22px rgba(210,36,192,0.10);
  transform: translateY(-1px);
}

/* Botón ancho alineado con inputs */
.btn-primary {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(90deg,#e62cd3,#ac1795);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px 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; }
}