/* ===== Reset básico ===== */
*{margin:0;padding:0;box-sizing:border-box}

/* ===== Tipografía y fondo ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
body{
  font-family:'Inter',sans-serif;
  background:#f5f5f5;
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;
}

/* ===== Tarjeta ===== */
.register-box{
  background:#fff;
  padding:2rem;
  border-radius:12px;
  box-shadow:0 0 15px rgba(0,0,0,.1);
  width:100%;
  max-width:500px;
}
.register-box h2{
  font-size:1.5rem;
  color:#333;
  text-align:center;
  margin-bottom:1.5rem;
}

/* ===== Inputs y selects ===== */
.register-box input,
.register-box select{
  width:100%;
  padding:.75rem;
  margin-bottom:1rem;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:1rem;
}
.register-box select{cursor:pointer}

/* ===== Grupo usuario + botón comprobar ===== */
.grupo-usuario{
  display:flex;gap:.5rem;align-items:center;
}
.btn-check{
  padding:.3rem .65rem;
  font-size:.8rem;
  background:transparent;
  border:1px solid #17a2b8;
  color:#17a2b8;
  border-radius:6px;
  cursor:pointer;
  transition:all .2s;
}
.btn-check:hover{
  background:#17a2b8;
  color:#fff;
}
.help-txt{font-size:.85rem}

/* ===== Botón submit ===== */
.btn-submit{
  width:100%;
  padding:.75rem;
  background:#007bff;
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:1rem;
  cursor:pointer;
  transition:background .2s;
}
.btn-submit:hover{background:#0056b3}

/* ===== Mensajes ===== */
.mensaje-error,
.mensaje-exito{
  padding:.75rem;
  border-radius:6px;
  margin-bottom:1rem;
  font-size:.95rem;
}
.mensaje-error{background:#f8d7da;color:#721c24}
.mensaje-exito{background:#d4edda;color:#155724}
.mensaje-error ul{padding-left:1.2rem}

/* ===== Validación visual en input ===== */
.is-valid  {border-color:#28a745!important}
.is-invalid{border-color:#dc3545!important}

/* ===== Enlace a login ===== */
.login-link{
  text-align:center;
  margin-top:1rem;
  font-size:.9rem;
}
.login-link a{color:#007bff;text-decoration:none}
.login-link a:hover{text-decoration:underline}