body.login-page{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow-x:hidden;
  background:url(fondo.png) center/cover no-repeat,linear-gradient(120deg,#dbe9f5 0%,#f1ece3 45%,#c9a97a 100%)}
.login-page .wave{position:absolute;pointer-events:none}
.login-page .wave.tl{top:0;left:0;width:34vw;min-width:260px}
.login-page .wave.br{bottom:0;right:0;width:62vw;min-width:420px}
.login-page .wave.br .open-book{position:absolute;right:6%;bottom:12%;width:12%}
.login-card{position:relative;z-index:1;width:min(92vw,540px);background:rgba(255,255,255,.94);border:1px solid #bcd3ea;border-radius:26px;
  padding:34px 40px 40px;box-shadow:0 20px 50px rgba(20,60,120,.25)}
.logo{display:flex;align-items:center;gap:14px;justify-content:center}
.logo svg{width:72px;height:auto;flex:none}
.logo .name{font-size:clamp(28px,5vw,40px);font-weight:800;color:#0f2a6b;letter-spacing:-.5px;line-height:1.05}
.logo .name i{display:block;height:8px;margin-top:4px;background:none;border-bottom:4px solid #2b8be0;border-radius:0 0 60% 60%/0 0 100% 100%}
.tagline{text-align:center;color:#555;font-size:19px;margin:18px 0 26px}
.login-card label{display:flex;align-items:center;gap:8px;font-weight:600;color:#0f2a6b;font-size:16px;margin:0 0 8px}
.login-card label svg{width:24px;height:24px;stroke:#0f5bbf;fill:none;stroke-width:1.8}
.field{position:relative;margin-bottom:18px}
.field input{width:100%;padding:14px 18px;font-size:17px;border:1.5px solid #cdd3dc;border-radius:16px;background:#fff;color:#222}
.field input:focus{outline:none;border-color:#0f6fdc;box-shadow:0 0 0 3px #0f6fdc33}
.field button.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;padding:6px;border-radius:50%;line-height:0}
.field button.eye:hover{background:#0001}
.field button.eye svg{width:26px;height:26px;stroke:#333;fill:none;stroke-width:1.8}
.login-card .go{width:100%;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:22px;font-weight:600;padding:15px;
  border-radius:40px;background:linear-gradient(180deg,#0a72e0,#0652a8);box-shadow:0 6px 14px rgba(6,82,168,.4)}
.login-card .go:hover{filter:brightness(1.1)}
.login-card .go svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8}
.login-card .flash{border-radius:12px}
@media(max-width:520px){
  body.login-page{align-items:flex-start;padding:7vh 0 24px}
  .login-card{padding:24px 18px 28px;border-radius:20px}.logo svg{width:48px}.logo{gap:10px}
  .tagline{font-size:16px;margin:12px 0 20px}.field input{font-size:16px;padding:12px 14px}
  .login-card .go{font-size:19px;padding:13px}
  .login-page .wave.tl{width:50vw}.login-page .wave.br{width:90vw;min-width:0}
}
@media(max-height:620px){body.login-page{align-items:flex-start;padding:16px 0}}

/* Las ondas ya vienen en la imagen de fondo */
.login-page .wave{display:none}