/* Zrive campus login redesign (approved v3). Scoped to the wp-login screen only.
   CSS + text filters only; WordPress form markup, field names and auth flow unchanged. */

@font-face{font-family:Geon;font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/Geon-Medium.woff2") format("woff2")}
@font-face{font-family:Geon;font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/Geon-Bold.woff2") format("woff2")}

:root{
  --navy:#283F7D;--blue:#517FFD;--ground:#0D1633;--ink:#14204A;--muted:#535F82;
  --pale:#F3F5FB;--line:#E4E8F2;--surface:#fff;--no-ink:#B43A34;
  --zfont:Geon,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- page frame: desktop split, mobile stack ---- */
body.login{
  margin:0;min-height:100vh;background:var(--surface);color:var(--ink);
  font-family:var(--zfont);font-weight:500;font-size:16px;line-height:1.5;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;
}
/* neutralise BuddyBoss / WP width + centering on the containers we re-place */
body.login #login{
  grid-column:2;grid-row:2;width:100%;max-width:380px;margin:0 auto;
  padding:0 24px;box-shadow:none;background:none;
}
body.login .zlr-foot{
  grid-column:2;grid-row:3;width:100%;max-width:380px;margin:0 auto;padding:0 24px;align-self:start;
}
/* any stray body child (bg layers etc.) must not grab a grid cell */
body.login>*:not(#login):not(.zlr-brand):not(.zlr-foot){grid-column:1 / -1;grid-row:auto;}

/* ---- left brand panel ---- */
.zlr-brand{
  grid-column:1;grid-row:1 / -1;position:relative;overflow:hidden;
  background-color:var(--ground);
  background-image:url("waves.svg");
  background-size:cover;background-position:center bottom;
  padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;
}
.zlr-brand .zlr-lock{position:relative;height:32px;width:auto;align-self:flex-start}
.zlr-brand .zlr-sym{position:absolute;right:-140px;top:50%;transform:translateY(-62%);
  width:560px;height:auto;opacity:.07;pointer-events:none}
.zlr-brand p{position:relative;margin:0;max-width:16ch;font-size:44px;line-height:1.08;
  font-weight:700;color:#fff;letter-spacing:-.02em}
.zlr-brand p .zlr-hl{color:#7B9FFF}
.zlr-brand small{display:block;margin-top:20px;max-width:34ch;font-size:16px;line-height:1.5;
  font-weight:500;color:#B9C6EA;letter-spacing:0}

/* ---- right column: hide WP/BuddyBoss chrome we replace ---- */
body.login h1.wp-login-logo,
body.login .login-heading,
body.login #backtoblog,
body.login .privacy-policy-page-link,
body.login #language-switcher,
body.login .login-language-selector{display:none!important}

/* injected title + subtitle (from login_message) */
body.login .zlr-h{margin:0 0 6px;font-size:26px;font-weight:700;color:var(--ground);
  letter-spacing:-.01em;line-height:1.15;text-align:left}
body.login .zlr-sub{margin:0 0 28px;color:var(--muted);font-size:15px;text-align:left}

/* ---- form ---- */
body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform{
  border:0;background:none;box-shadow:none;padding:0;margin:0;
  display:grid;gap:18px;overflow:visible;
}
/* widths include padding+border so inputs never overflow their column */
body.login #loginform *,
body.login #lostpasswordform *,
body.login #resetpassform *{box-sizing:border-box}
body.login form p,
body.login form .user-pass-wrap,
body.login form .user-email-wrap{margin:0}

/* visible field labels ABOVE each field (defeat BuddyBoss floating-label mode) */
body.login label[for=user_login],
body.login label[for=user_pass],
body.login label[for=pass1],
body.login label[for=pass2]{
  position:static!important;transform:none!important;float:none!important;
  display:block!important;margin:0 0 6px!important;padding:0!important;
  font-family:var(--zfont)!important;font-weight:700!important;font-size:14px!important;
  line-height:1.3!important;color:var(--ground)!important;background:none!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:auto!important;max-width:none!important;height:auto!important;
}

body.login .login input[type=text],
body.login .login input[type=email],
body.login .login input[type=password],
body.login #loginform input.input,
body.login #lostpasswordform input.input,
body.login #resetpassform input{
  box-sizing:border-box;
  font:inherit;font-family:var(--zfont);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px!important;width:100%;height:auto;
  box-shadow:none;margin:0;transition:border-color .15s;
}
body.login input:hover{border-color:#C9D1E6}
body.login input:focus{border-color:var(--navy);box-shadow:none}

/* BuddyBoss's floating-label JS hides the real label text in a .screen-reader-text span
   and adds a placeholder. Un-hide the label text (shown ABOVE via the label rule above),
   drop the placeholder, and remove BuddyBoss's label-switch artifact. */
body.login #loginform label > .screen-reader-text,
body.login #lostpasswordform label > .screen-reader-text,
body.login #resetpassform label > .screen-reader-text{
  position:static!important;clip:auto!important;clip-path:none!important;
  width:auto!important;height:auto!important;margin:0!important;padding:0!important;
  overflow:visible!important;white-space:normal!important;border:0!important;
  font-family:var(--zfont)!important;font-weight:700!important;font-size:14px!important;
  line-height:1.3!important;color:var(--ground)!important;
}
body.login form label .label-switch{display:none!important}
body.login #loginform input::placeholder,
body.login #lostpasswordform input::placeholder,
body.login #resetpassform input::placeholder{color:transparent!important;opacity:0!important}

/* password field + text show/hide button (reuses WP .wp-hide-pw + its JS).
   .wp-pwd is exactly the input box, so the toggle anchors to the input itself. */
body.login .wp-pwd{position:relative!important;display:block!important;box-sizing:border-box!important;width:100%!important;padding:0!important}
/* right padding >= toggle width + 16 so typed text never runs under the toggle.
   2 ids beat the general input padding rule (#loginform input.input). */
body.login #loginform #user_pass,
body.login #resetpassform #pass1,
body.login #resetpassform #pass2{padding-right:104px!important}
/* toggle sits INSIDE the input's right padding, vertically centred (top:0/bottom:0 -> full input height, flex-centred).
   High specificity + !important to beat BuddyBoss's right:0/top:0. */
body.login .wp-pwd button.wp-hide-pw{
  position:absolute!important;top:0!important;bottom:0!important;right:16px!important;left:auto!important;
  width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;max-height:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;padding:0!important;transform:none!important;
  background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  color:var(--navy)!important;font-family:var(--zfont)!important;font-weight:700!important;font-size:14px!important;line-height:1!important;
  white-space:nowrap!important;cursor:pointer;z-index:2;
}
body.login .wp-hide-pw .dashicons{display:none!important}
body.login .wp-hide-pw::after{content:"Mostrar";font-family:var(--zfont);font-weight:700;font-size:14px;color:var(--navy)}
/* WP's own toggle flips data-toggle 0/1 and the input type; key the label off both for robustness */
body.login .wp-hide-pw[data-toggle="1"]::after{content:"Ocultar"}
body.login .wp-pwd:has(#user_pass[type="text"]) .wp-hide-pw::after{content:"Ocultar"}

/* remove BuddyBoss bb-icons field glyphs (person/key) that overlap the placeholders */
body.login label[for=user_login]::before,
body.login label[for=user_pass]::before,
body.login .wp-pwd::before,
body.login .user-pass-wrap::before,
body.login #loginform p::before,
body.login #lostpasswordform p::before,
body.login #resetpassform p::before{content:none!important;display:none!important}

/* lost-password link (BuddyBoss renders it inside the form, under the password) */
body.login .lostmenot{margin:0;text-align:right}
body.login .lostmenot a{font-size:14px}

/* remember me */
body.login .forgetmenot{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:500;color:var(--muted);margin:0}
body.login .forgetmenot label{font-weight:500;color:var(--muted);font-size:14px;margin:0}
body.login .forgetmenot input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--navy)}

/* submit */
body.login .submit{margin:0}
body.login #wp-submit,
body.login .button.button-primary{
  font:inherit;font-family:var(--zfont);font-weight:700;background:var(--navy);color:#fff;
  border:0;border-radius:999px;padding:14px;width:100%;height:auto;line-height:1.2;
  text-shadow:none;box-shadow:none;cursor:pointer;margin:6px 0 0;transition:background .15s;
}
body.login #wp-submit:hover,
body.login .button.button-primary:hover{background:var(--ground)}

/* links */
body.login a{color:var(--navy);font-weight:700;text-decoration:none}
body.login a:hover{text-decoration:underline}
body.login :focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* error + notices: light tint + full 1px hairline all around, NO left accent stripe */
body.login #login_error,
body.login .login .notice-error,
body.login div.notice-error{
  margin:0 0 18px;padding:12px 14px;
  border:1px solid #E7BEBB!important;border-left:1px solid #E7BEBB!important;border-radius:6px;
  background:#FCF3F2;color:var(--no-ink);font-size:13px;box-shadow:none;
}
body.login .notice-info,
body.login .message{
  margin:0 0 18px;padding:12px 14px;background:var(--pale);color:var(--muted);
  font-size:14px;border-radius:6px;border:1px solid #DCE2F0!important;box-shadow:none;
}
body.login .notice-success{
  margin:0 0 18px;padding:12px 14px;background:#EEF4EE;color:#2F6B3A;
  font-size:14px;border-radius:6px;border:1px solid #CFE3D2!important;box-shadow:none;
}

/* footer help + legal */
.zlr-foot .zlr-help{margin:28px 0 0;font-size:14px;color:var(--muted)}
.zlr-foot .zlr-legal{margin:40px 0 0;font-size:13px;color:var(--muted)}
.zlr-foot .zlr-legal a{color:var(--muted);font-weight:500}
/* keep a muted secondary nav (log in / register on secondary screens) if present */
body.login #nav{margin:18px 0 0;font-size:14px;color:var(--muted);text-align:left}

/* reset-password extras */
body.login .password-input-wrapper{width:100%}
body.login .pw-weak{margin:10px 0 0;font-size:13px;color:var(--muted)}
body.login #pass-strength-result{margin:8px 0 0;border-radius:6px;font-size:13px}
body.login .wp-pwd .button.wp-generate-pw{margin:0 0 10px}

/* ---- mobile: short navy band (logo only) then form ---- */
@media(max-width:860px){
  body.login{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .zlr-brand{grid-column:1;grid-row:1;padding:22px 20px 28px;background-position:center 85%}
  .zlr-brand .zlr-sym{display:none}
  .zlr-brand p{display:none}
  .zlr-brand small{display:none}
  body.login #login{grid-column:1;grid-row:2;padding:32px 20px 8px;max-width:420px}
  body.login .zlr-foot{grid-column:1;grid-row:3;padding:0 20px 40px;max-width:420px}
}