/*==============================================================================
  MSM ACADEMY — LOGIN Y REGISTRO
  ------------------------------------------------------------------------------
  Login:    wp-login.php sobre la capa ReadyLaunch  (body.login.bb-login)
  Registro: página /register de ReadyLaunch         (body.registration.bb-rl-register)

  Ambas reciben desde PHP la clase `bb-rl-dark-mode`, que activa los 70 tokens
  oscuros nativos de ReadyLaunch (BuddyBoss no la pone en estas dos plantillas).
  Con eso resueltas las superficies, aquí se construye la escena MSM: orbes,
  partículas, tarjeta de cristal y acento gold.

  ESTRUCTURA REAL (comprobada en el HTML servido), que condiciona todo el CSS:

    body.login
      └ #login                      ← la tarjeta; lo contiene TODO
          ├ h1.wp-login-logo
          ├ .login-heading
          ├ form#loginform
          │   ├ input#user_login.input
          │   ├ .user-pass-wrap > .wp-pwd > input#user_pass
          │   ├ p.lostmenot  ·  p.forgetmenot  ← van en una sola fila
          │   └ p.submit > #wp-submit
          ├ p#nav  ·  p#backtoblog
          └ .privacy-policy-page-link
      └ .language-switcher          ← HERMANO de #login, no hijo

  El desbordamiento venía de tratar #nav/#backtoblog como si estuvieran fuera
  de la tarjeta, y de dejar .language-switcher sin posicionar.
==============================================================================*/

/*------------------------------------------------------------------------------
  1. ESCENARIO COMÚN
------------------------------------------------------------------------------*/
html {
    margin-top: 0px !important;
}
body.msm-auth {
  position: relative;
  min-height: 100vh;
  background: var(--msm-bg);
  color: var(--msm-fg);
  font-family: var(--msm-display);
  overflow-x: hidden;
}

#login h1.wp-login-logo a {
    filter: invert(1) brightness(12.5);
    margin-bottom: 27px;
}
body.login.msm-auth .bb-rl-login-header-logo img {
    filter: invert(1) brightness(21.5);
}

/* Halo cálido detrás de la tarjeta — mismo recurso que `.cta-glow` del home */
body.msm-auth::before {
  content: "";
  position: fixed;
  top: 50%; left: 50%;
  width: 760px; height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgba(var(--msm-gold-rgb), .18) 0%,
              rgba(var(--msm-gold-rgb), 0) 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

body.msm-auth > .msm-orbs,
body.msm-auth > .msm-particles { position: fixed; z-index: 0; }

/* Grano sutil: rompe el banding de los degradados grandes */
body.msm-auth::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- La tarjeta de cristal, compartida por login y registro --- */
body.msm-auth .msm-auth-card,
body.msm-auth #login,
body.msm-auth .register-section {
  position: relative;
  background: rgba(19, 16, 9, .82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--msm-line-2);
  border-radius: var(--msm-r-xl);
  box-shadow: var(--msm-shadow-lift);
}

/* Filo de gradiente superior — la firma del footer del home */
body.msm-auth #login::before,
body.msm-auth .register-section:first-child::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--msm-gold), var(--msm-gold-hover), transparent);
}

/* --- Campos: un solo lenguaje para las dos pantallas --- */
body.msm-auth input[type="text"],
body.msm-auth input[type="email"],
body.msm-auth input[type="password"],
body.msm-auth input[type="tel"],
body.msm-auth .input,
body.msm-auth .standard-form input[type="text"],
body.msm-auth .standard-form input[type="email"],
body.msm-auth .standard-form input[type="password"],
body.msm-auth .register-section input,
body.msm-auth .login form .input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(246, 241, 230, .05);
  border: 1px solid var(--msm-line-2);
  border-radius: 10px;
  padding: 14px 16px;
  font: 400 15px var(--msm-display);
  color: var(--msm-fg);
  box-shadow: none;
  margin: 0 0 4px;
  transition: border-color .2s var(--msm-ease), box-shadow .2s var(--msm-ease), background .2s;
}

body.msm-auth input::placeholder { color: var(--msm-muted-3); }

body.msm-auth input[type="text"]:focus,
body.msm-auth input[type="email"]:focus,
body.msm-auth input[type="password"]:focus,
body.msm-auth .input:focus,
body.msm-auth .register-section input:focus,
body.msm-auth .login form .input:focus {
  background: rgba(246, 241, 230, .08);
  border-color: var(--msm-gold);
  box-shadow: 0 0 0 3px rgba(var(--msm-gold-rgb), .18);
  outline: none;
}

/*
  Autorrelleno de Chrome. Sin esto el navegador pinta el campo en lavanda claro
  y el texto en oscuro: sobre la tarjeta dark no se veía lo que se escribía.
  El inset shadow de 1000px es la única forma de repintar ese fondo.
*/
body.msm-auth input:-webkit-autofill,
body.msm-auth input:-webkit-autofill:hover,
body.msm-auth input:-webkit-autofill:focus,
body.msm-auth input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--msm-fg) !important;
  -webkit-box-shadow: 0 0 0 1000px #1c1910 inset !important;
  box-shadow: 0 0 0 1000px #1c1910 inset !important;
  caret-color: var(--msm-fg);
  border: 1px solid var(--msm-line-2);
  transition: background-color 9999s ease-in-out 0s;
}

/* --- Etiquetas --- */
body.msm-auth label,
body.msm-auth .register-section legend,
body.msm-auth .editfield legend {
  display: block;
  font: 600 11px var(--msm-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--msm-muted-2);
  margin: 0 0 8px;
  padding: 0;
  float: none;
  width: auto;
}

/* --- Botón principal --- */
body.msm-auth .button-primary,
body.msm-auth #wp-submit,
body.msm-auth #signup_submit,
body.msm-auth .submit input[type="submit"] {
  width: 100%;
  display: block;
  background: var(--msm-gold);
  border: 1px solid var(--msm-gold);
  border-radius: var(--msm-r-pill);
  color: #fff;
  font: 700 15px var(--msm-display);
  padding: 15px 24px;
  height: auto;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: all .25s var(--msm-ease);
}
body.msm-auth .button-primary:hover,
body.msm-auth #wp-submit:hover,
body.msm-auth #signup_submit:hover,
body.msm-auth .submit input[type="submit"]:hover {
  background: var(--msm-gold-hover);
  border-color: var(--msm-gold-hover);
  transform: translateY(-2px);
  box-shadow: var(--msm-shadow-glow);
}

/* --- Medidores de fuerza --- */
body.msm-auth #pass-strength-result,
body.msm-auth #email-strength-result {
  background: rgba(246, 241, 230, .05);
  border: 1px solid var(--msm-line-2);
  border-radius: var(--msm-r-sm);
  color: var(--msm-muted);
  font: 400 12px var(--msm-display);
  padding: 8px 12px;
  margin-top: 8px;
}
body.msm-auth #pass-strength-result.strong { border-color: var(--msm-success); color: var(--msm-success); }
body.msm-auth #pass-strength-result.short,
body.msm-auth #pass-strength-result.bad  { border-color: var(--msm-danger);  color: var(--msm-danger); }
body.msm-auth #pass-strength-result.good { border-color: var(--msm-warning); color: var(--msm-warning); }

/* --- Modales de términos/privacidad: ocultos hasta que Magnific los abre --- */
body.msm-auth .mfp-hide { display: none !important; }
body.msm-auth .login-popup.bb-modal,
body.msm-auth .registration-popup.bb-modal {
  background: var(--msm-surface-2);
  border: 1px solid var(--msm-line);
  border-radius: var(--msm-r-lg);
  color: var(--msm-fg);
  padding: 32px;
}

/*==============================================================================
  2. LOGIN — wp-login.php
==============================================================================*/
body.login.msm-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 20px;
  margin: 0;
}

/* Cabecera ReadyLaunch (logo + "¿no tienes cuenta?") */
body.login.msm-auth .bb-rl-login-header {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--msm-gutter);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.login.msm-auth .bb-rl-login-header-logo img { max-height: 34px; width: auto; }
body.login.msm-auth .bb-rl-login-header-actions { display: flex; align-items: center; gap: 12px; }
body.login.msm-auth .bb-rl-login-header-actions-text {
  color: var(--msm-muted);
  font: 400 13px var(--msm-display);
}
body.login.msm-auth .bb-rl-button--secondary-fill,
body.login.msm-auth .bb-rl-button {
  background: transparent;
  border: 1px solid var(--msm-line-3);
  color: var(--msm-fg);
  border-radius: var(--msm-r-pill);
  font: 700 13px var(--msm-display);
  padding: 10px 20px;
  transition: all .25s var(--msm-ease);
}
body.login.msm-auth .bb-rl-button:hover {
  border-color: var(--msm-gold);
  color: var(--msm-gold);
  background: rgba(var(--msm-gold-rgb), .08);
}

/* --- La tarjeta --- */
body.login.msm-auth #login {
  z-index: 3;
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding: 44px 40px 36px;
  box-sizing: border-box;
  border: 0px;
}
body.msm-ui #wpadminbar {
    display: none;
}
body.login.msm-auth .wp-login-logo { margin: 0 0 6px; }
body.login.msm-auth .wp-login-logo a,
body.login.msm-auth .wp-login-logo img {
  margin: 0 auto;
  max-height: 40px;
  width: auto;
  background-size: contain;
  text-indent: 0;
}

body.login.msm-auth .login-heading { text-align: center; margin: 0 0 28px; }
body.login.msm-auth .login-heading h2 {
  margin: 0 0 8px;
  font: 800 28px/1.12 var(--msm-display);
  letter-spacing: -.02em;
  color: var(--msm-fg);
}
body.login.msm-auth .login-heading span,
body.login.msm-auth .login-heading p {
  font: 300 14.5px/1.6 var(--msm-display);
  color: var(--msm-muted);
}

body.login.msm-auth #loginform,
body.login.msm-auth form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  overflow: visible;
}

body.login.msm-auth #loginform > p,
body.login.msm-auth .user-pass-wrap { margin: 0 0 18px; }

body.login.msm-auth .wp-pwd { position: relative; }
body.login.msm-auth .wp-hide-pw {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--msm-muted-2);
  padding: 8px;
  height: auto;
  width: auto;
}
body.login.msm-auth .wp-hide-pw:hover { color: var(--msm-gold); }
body.login.msm-auth .wp-hide-pw .dashicons { color: inherit; }

/*
  "Recuérdame" y "¿Olvidaste tu contraseña?" son dos <p> hermanos que WordPress
  emite en orden inverso al visual. Se colocan en una fila con order explícito
  en vez de floats, que era lo que descuadraba la tarjeta.
*/
body.login.msm-auth #loginform {
  display: flex;
  flex-direction: column;
}
body.login.msm-auth .forgetmenot,
body.login.msm-auth .lostmenot {
  display: flex;
  align-items: center;
  width: auto;
  float: none;
  margin: 0;
  font: 400 13px var(--msm-display);
  line-height: 1.4;
}
body.login.msm-auth .forgetmenot {
  order: 3;
  color: var(--msm-muted);
  gap: 8px;
  flex-wrap: wrap;
}
body.login.msm-auth .lostmenot { order: 4; justify-content: flex-end; margin: -28px 0 20px; }
body.login.msm-auth .lostmenot a { color: var(--msm-gold); text-decoration: none; }
body.login.msm-auth .lostmenot a:hover { color: var(--msm-gold-hover); }
body.login.msm-auth .submit { order: 5; margin: 6px 0 0; }

body.login.msm-auth .forgetmenot input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--msm-gold);
  flex: none;
}
body.login.msm-auth .forgetmenot label {
  display: inline;
  margin: 0;
  font: 400 13px var(--msm-display);
  letter-spacing: normal;
  text-transform: none;
  color: var(--msm-muted);
}
body.login.msm-auth .wp-tooltip { display: inline-flex; align-items: center; }
body.login.msm-auth .wp-tooltip__toggle { background: none; border: none; color: var(--msm-muted-3); padding: 0 4px; cursor: pointer; }
body.login.msm-auth .wp-tooltip__bubble {
  background: var(--msm-surface-3);
  color: var(--msm-fg);
  border: 1px solid var(--msm-line-2);
  border-radius: var(--msm-r-sm);
}

/* --- Enlaces dentro de la tarjeta --- */
body.login.msm-auth #nav,
body.login.msm-auth #backtoblog,
body.login.msm-auth .privacy-policy-page-link {
  margin: 18px 0 0;
  padding: 0;
  text-align: center;
  font: 400 13px/1.7 var(--msm-display);
  color: var(--msm-muted-2);
  text-shadow: none;
}
body.login.msm-auth #nav { padding-top: 18px; border-top: 1px solid var(--msm-line); }
body.login.msm-auth #nav a,
body.login.msm-auth #backtoblog a,
body.login.msm-auth .privacy-policy-page-link a {
  color: var(--msm-gold);
  text-decoration: none;
}
body.login.msm-auth #nav a:hover,
body.login.msm-auth #backtoblog a:hover,
body.login.msm-auth .privacy-policy-page-link a:hover { color: var(--msm-gold-hover); }

/* --- Selector de idioma: hermano de #login, se ancla debajo --- */
body.login.msm-auth .language-switcher {
  position: relative;
  z-index: 3;
  margin: 0;
  width: 100%;
  max-width: 460px;
}
body.login.msm-auth .language-switcher form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.login.msm-auth .language-switcher label {
  margin: 0;
  color: var(--msm-muted-3);
  font-size: 10px;
}
body.login.msm-auth .language-switcher select {
  background: rgba(246, 241, 230, .05);
  border: 1px solid var(--msm-line-2);
  border-radius: var(--msm-r-pill);
  color: var(--msm-fg);
  padding: 8px 14px;
  font: 400 13px var(--msm-display);
  max-width: 220px;
}
body.login.msm-auth .language-switcher .button {
  background: transparent;
  border: 1px solid var(--msm-line-2);
  border-radius: var(--msm-r-pill);
  color: var(--msm-muted);
  padding: 8px 16px;
  font: 600 12px var(--msm-display);
  width: auto;
  cursor: pointer;
}
body.login.msm-auth .language-switcher .button:hover { border-color: var(--msm-gold); color: var(--msm-gold); }

/* --- Avisos --- */
body.login.msm-auth .message,
body.login.msm-auth #login_error,
body.login.msm-auth .notice {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
  background: rgba(19, 16, 9, .9);
  border: 1px solid var(--msm-line-2);
  border-left: 3px solid var(--msm-gold);
  border-radius: var(--msm-r-sm);
  color: var(--msm-fg);
  box-shadow: none;
  font: 400 13.5px/1.6 var(--msm-display);
  padding: 14px 16px;
  margin: 0;
}
body.login.msm-auth #login_error { border-left-color: var(--msm-danger); }

@media (max-width: 560px) {
  body.login.msm-auth #login { padding: 34px 22px 28px; }
  body.login.msm-auth .bb-rl-login-header { flex-direction: column; gap: 14px; }
}

/*==============================================================================
  3. REGISTRO — /register
  Misma escena y mismos componentes que el login. Antes quedaba fuera de la
  línea porque ReadyLaunch servía esta plantilla en claro.
==============================================================================*/
body.registration.msm-auth { display: block; min-height: 0; }

body.msm-auth .register-page-main {
  position: relative;
  z-index: 3;
  max-width: 560px;
  margin: 60px auto 60px;
  padding: 56px 20px 72px;
  background-color: rgba(19, 16, 9, .82);
  border: 0px;
}
body.msm-auth .register-page-main::before {
    content: "" !important;
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--msm-gold), var(--msm-gold-hover), transparent);
}

body.msm-auth .register-page-logo {
  display: block;
  text-align: center;
  margin: 0 0 30px;
}
body.msm-auth .register-page-logo img {
    max-height: 42px;
    width: auto;
    margin: 10px auto 0px;
    filter: invert(1) brightness(16.5);
}
body.msm-auth .buddypress-wrap,
body.msm-auth #register-page,
body.msm-auth .standard-form.signup-form,
body.msm-auth .layout-wrap {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* Encabezado propio: el registro no traía título, y sin él la escena quedaba muda */
body.msm-auth .register-page-main::before {
  content: "Crea tu cuenta";
  display: block;
  text-align: center;
  font: 800 30px/1.1 var(--msm-display);
  letter-spacing: -.025em;
  color: var(--msm-fg);
  margin-bottom: 8px;
}
body.msm-auth .register-page-main::after {
  content: "Un solo acceso a todas las clases de MSM Academy.";
  display: block;
  text-align: center;
  font: 300 14.5px/1.6 var(--msm-display);
  color: var(--msm-muted);
  margin-bottom: 30px;
}
/* El logo debe ir sobre el título, no debajo del pseudo-elemento */
body.msm-auth .register-page-main { display: flex; flex-direction: column; }
body.msm-auth .register-page-logo { order: 1; }
body.msm-auth .register-page-main::before { order: 2; }
body.msm-auth .register-page-main::after  { order: 3; }
body.msm-auth .register-page-main > #buddypress { order: 4; }

body.msm-auth .register-section {
    padding: 32px 30px;
    margin: 0 0 20px;
    background: none;
    border: 0px;
    box-shadow: none;
}

body.msm-auth .register-section > h2,
body.msm-auth .register-section > legend {
  margin: 0 0 18px;
  font: 700 13px var(--msm-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--msm-gold);
}

body.msm-auth .bb-signup-field,
body.msm-auth .editfield { margin: 0 0 20px; }
body.msm-auth .bb-signup-field:last-child,
body.msm-auth .editfield:last-child { margin-bottom: 0; }

body.msm-auth .bb-password-wrap { position: relative; }
body.msm-auth .bb-toggle-password {
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  color: var(--msm-muted-2);
  z-index: 2;
}
body.msm-auth .bb-toggle-password:hover { color: var(--msm-gold); }

body.msm-auth .register-privacy-info {
  font: 300 13px/1.7 var(--msm-display);
  color: var(--msm-muted-2);
  text-align: center;
  margin: 4px 0 22px;
}
body.msm-auth .register-privacy-info a { color: var(--msm-gold); text-decoration: none; }
body.msm-auth .register-privacy-info a:hover { color: var(--msm-gold-hover); }

body.msm-auth .signup-form .submit { margin: 0; padding: 0; }

/* Tarjetas de previsualización que ReadyLaunch muestra al costado */
body.msm-auth .bb-rl-popup-card,
body.msm-auth .bb-profile-card,
body.msm-auth .bb-rl-group-card {
  background: var(--msm-surface-2);
  border: 1px solid var(--msm-line);
  border-radius: var(--msm-r-lg);
  color: var(--msm-fg);
}
body.msm-auth .bb-rl-card-heading { color: var(--msm-fg); font-family: var(--msm-display); font-weight: 700; }
body.msm-auth .bb-rl-card-meta    { color: var(--msm-muted-2); }
body.msm-auth .bb-rl-loading-bg   { background: rgba(246, 241, 230, .07); }

@media (max-width: 560px) {
  body.msm-auth .register-section { padding: 26px 20px; }
  body.msm-auth .register-page-main::before { font-size: 25px; }
}