*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;display:grid;place-items:center;
  font-family:Arial,sans-serif;background:#f3f7fa;color:#17212b;padding:20px
}
.tarjeta{
  width:min(460px,100%);background:#fff;border:1px solid #bdd0dc;
  border-radius:14px;padding:28px;box-shadow:0 16px 45px rgba(15,48,75,.14)
}
h1{margin:0;color:#0f304b;text-align:center}
h2{text-align:center;margin:8px 0 24px;font-size:18px;font-weight:normal}
label{display:block;margin:14px 0 6px;font-weight:bold;color:#0f304b}
input,select{
  width:100%;padding:12px;border:1px solid #9db2c2;border-radius:7px;font-size:16px
}
button{
  width:100%;margin-top:20px;padding:13px;border:0;border-radius:7px;
  background:#176684;color:#fff;font-weight:bold;font-size:16px;cursor:pointer
}
button:disabled{opacity:.6;cursor:not-allowed}
.mensaje{margin-top:16px;padding:11px;border-radius:7px;display:none;line-height:1.45}
.mensaje.ok{display:block;background:#e7f7ec;color:#175b2c}
.mensaje.error{display:block;background:#fdecec;color:#8a2020}
.ayuda{font-size:13px;color:#5d6c77;line-height:1.45;margin-top:14px}