/* Para el nuevo título que añadimos */
.login-title {
    text-align: center;
    color: #fff; /* O el color que uses */
    font-size: 28px;
    margin-bottom: 20px;
}

/* Para la línea "Recordarme | ¿Olvidaste...?" */
.forgetmenot {
    display: flex;
    justify-content: space-between; /* Los separa */
    align-items: center;
    width: 100%;
}
.forgetmenot label {
    margin: 0;
}
.forgetmenot a {
    float: none; /* Quitamos el float que trae por defecto */
}

/* Para el enlace final "Crea tu cuenta" */
.login-register-link {
    text-align: center;
    margin-top: 25px;
}
.login-register-link a {
    font-weight: bold;
}
/*
 * CSS para el nuevo botón "Registrarse" (para que se vea 
 * igual que el botón de "Iniciar sesión")
 */

/* Contenedor del nuevo botón */
.submit-register {
    margin-top: 16px; /* Para separarlo del botón de arriba */
    margin-bottom: 16px;
    padding: 0;
}

/* El botón <a> en sí */
#wp-register-button {
    width: 100%;           /* Hacerlo de ancho completo */
    display: block;        /* Para que ocupe todo el ancho */
    box-sizing: border-box; /* Importante para el ancho */
    text-align: center;
    text-decoration: none; /* Quitar subrayado del enlace */
}

/*
 * CSS para el nuevo enlace "Ir a ELITEED"
 */
.back-to-home-link {
    text-align: left;
    margin-top: 1.5em;
    clear: both;
}

/* Asegúrate de que los enlaces "olvidaste contraseña" y "volver"
   tengan un color visible sobre tu fondo */
#nav a,
#backtoblog a,
.back-to-home-link a,
.forgetmenot a {
    color: #c0c0c0; /* Un gris claro, ajústalo a tu diseño */
}

.back-to-home-link a {
     color: #fff; /* O el color que prefieras para el enlace principal */
     font-weight: bold;
}
/*
 * CSS para el divisor "O"
 */
.login-or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0; /* Ajusta el espacio vertical */
    color: #ffffff; /* Color de la 'O' y las líneas (ajusta si es necesario) */
    opacity: 0.7;
}

/* Esto crea las líneas a los lados de la "O" */
.login-or-divider::before,
.login-or-divider::after {
    content: '';
    flex: 1; /* Ocupan el espacio disponible */
    border-bottom: 1px solid #ffffff; /* La línea */
}

/* Espaciado del texto "O" */
.login-or-divider span {
    font-weight: bold;
    padding: 0 1em; /* Espacio a los lados de la 'O' */
}
/*quitar background del form*/
body.login form#loginform {
    background: none; /* ¡Esta es la línea clave! */}
/*border radius del login*/
body.login #loginform .input,
body.login #loginform input[type="text"],
body.login #loginform input[type="password"] {
    border-radius: 14px; 
    font-size: 13px;
    height: 15px;
}
/*cambiar el color del checkbox*/
.login form input[type=checkbox]{
    border-color: white !important;
}

.forgetmenot input[type="checkbox"]:checked::before {
    
    content: url('https://especializacioneseliteed.com/wp-content/uploads/2025/11/check.png'); 
    margin: -2px 0 0 -4px;
}
/*cambiar el estilo de Olvidaste tu contraseña*/
.forgetmenot a {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
}
/*acomodar el boton para mostrar contraseña*/
.login .button.wp-hide-pw {
    top: 1px;
}
/*mover el form al medio*/
body #login {
    margin-top: 8%;
}
/* SOLUCIÓN AL PARPADEO */

/* 1. Ocultamos el contenedor original de los enlaces (#nav) y el de volver (#backtoblog)
   para que el usuario no los vea abajo antes de que el JS los mueva o elimine. */
#nav, #backtoblog {
    display: none !important;
}

/* 2. Como tu JS mueve el enlace <a> a un nuevo lugar (.forgetmenot),
   necesitamos asegurarnos de que ese enlace sea visible una vez movido.
   (Generalmente al sacarlo del contenedor oculto se vuelve visible, 
   pero esto asegura que tenga el estilo correcto). */
.forgetmenot a {
    display: inline-block; /* O block, según prefieras */
}



/*
 * ----------------------------------------
 * ESTILOS EXCLUSIVOS PARA REGISTRO
 * ----------------------------------------
*/

/* Ocultar labels (reforzamos lo de JS) */
.login-action-register label {
    display: none;
}

/* Títulos de sección (Datos personales, Crea tu usuario) */
.login-action-register .register-section-title {
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 25px;
    font-weight: bold;
}

/* El <p> que ahora es nuestro contenedor de grupo (icono + input) */
.login-action-register .login-input-group {
    display: flex; /* ¡La clave! */
    margin-bottom: 15px; /* Espacio entre campos */
}

/* Estilo del icono (el cuadro amarillo) */
.login-action-register .login-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1E73BE; /* Color amarillo de la imagen */
    color: #ffffff; /* Color del icono */
    padding: 0 12px;
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
    font-size: 20px; /* Tamaño del icono (usamos Dashicons de WP) */
    width: 30px; /* Ancho fijo para el icono */
    height: auto;
}

/* Estilo del input (el campo blanco) */
.login-action-register .login-input-group input.input {
    flex: 1; /* Ocupa el resto del espacio */
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    height: 15px; /* Altura fija */
    border: none;
    padding-left: 15px;
    font-size: 13px;
    margin: 0; /* Reseteamos margen del input */
}

/* Ocultar el texto "La confirmación... se enviará por email" */
.login-action-register #reg_passmail {
    display: none;
}
/*quitar el fondo del form*/
body.login form#registerform{
    background: none !important;
    margin-top: 2px !important;
}
body.login #registerform input[type="text"],
body.login #registerform input[type="password"] { 
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    font-size: 13px;
    height: 15px;
    background: #FFFFFFE6;
}

.login-action-register .loginpress-reg-pass-wrap-1,
.login-action-register .loginpress-reg-pass-wrap-2 {
    display: flex;
    margin-bottom: 15px;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
    /* Importante: quitamos el padding del div original */
    padding: 0; 
}

/* El input de LoginPress que está DENTRO del grupo.
  Le quitamos el fondo (ahora está en el padre) y los bordes.
*/
.login-action-register .loginpress-reg-pass-wrap-1 input.input,
.login-action-register .loginpress-reg-pass-wrap-2 input.input {
    flex: 1; /* Ocupa el espacio disponible */
    height: 48px;
    border: none;
    font-size: 16px;
    margin: 0;
    border-radius: 0;
    background: none; /* Sin fondo */
    box-shadow: none;
    padding-left: 15px; /* Padding que ya teníamos */
}

/* El icono del "ojo" (mostrar/ocultar) de LoginPress.
  Lo mantenemos a la derecha.
*/
.login-action-register .loginpress-reg-pass-wrap-1 .show-password-toggle,
.login-action-register .loginpress-reg-pass-wrap-2 .show-password-toggle {
    color: #777;
    cursor: pointer;
    /* Reseteamos el posicionamiento que trae por defecto */
    right: auto;
    top: auto;
    transform: none;
    background: none;
}

.loginpress-reg-pass-wrap-1.password-field{
    padding-top: 15px;
}

.login-action-register .loginpress-reg-pass-wrap-1 .show-password-toggle,
.login-action-register .loginpress-reg-pass-wrap-2 .show-password-toggle {
    position: absolute; /* ¡Posicionamiento absoluto! */
    right: 15px; /* A 15px del borde derecho */
    top: 50%; /* Centrado vertical */
    transform: translateY(-50%); /* Ajuste fino vertical */
    padding: 0; /* Quitamos el padding anterior */
    color: #777;
    cursor: pointer;
}

.login-action-register .loginpress-reg-pass-wrap-1 .show-password-toggle{
    padding-top: 6px;
}

.dashicons-hidden:before {
    color: #1E73BE !important;
}


.login-bottom-links {
    display: flex;
    justify-content: space-between; /* "uno a la derecha y otra al login" */
    align-items: center;
    margin-top: 30px; /* Espacio después del botón */
    padding: 0 5px; /* Pequeño padding lateral */
}

.login-bottom-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    opacity: 0.9;
    text-decoration: underline;
}

.login-action-register h1.wp-login-logo {
    display: none !important;
}
.login-action-register .login-main-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px; 
}

body.login #login form p + p:not(.forgetmenot){
    margin-top: 13px !important;
}

.loginpress-reg-pass-wrap-1.password-field {
    padding-top: 13px;
    margin-bottom: 13px;
}
body.login #login form p.submit {
    padding-top: 10px !important;
}
body.login-action-register #login {
    
    width: 380px !important;
    margin-top: 3% !important; /* */
    padding-bottom: 20px;
}
body.login #registerform h2 {
    margin: 10px 0 !important;
}

.login-action-register .login-main-subtitle {
    color: #ffffff;
    font-size: 18px; /* Más pequeño que el título */
    font-weight: 400; /* 400 es el peso "normal" (no negrita) */
    text-align: center; /* Ajuste para acercarlo al título */
    opacity: 0.9;
}
.login .notice-error {
    border: none;
    border-radius: 20px;
    background: rgb(255 0 0 / 84%);
    margin-bottom: 1px;
    margin-top: 10px;
    color:white;
}

.login .message{
    border: none !important;;
    border-radius: 20px;
    background:#639ED2!important;
    color:white ;
}

.login-action-lostpassword #login {
    padding: 5px 30px 5px 30px !important;
}

#lostpasswordform input[type="text"] {
    border-radius: 13px;
    font-size: 13px;
}
/* ✅ Oculta visualmente pero mantiene en el DOM */
.user-login-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
/*vista para recuperar contraseña*/
.login-action-rp #login{
    padding: 20px !important;
}

.js.login-action-rp input[type=text]{
    border-radius: 15px !important;
    font-size: 13px

}
.login #pass-strength-result {
    border-radius: 15px;
    margin-top:7px;
    color: white;
}
#pass1.strong {
    border-radius: 15px;
    border-color: #68de7c;
    font-size: 13px !important;
    color: black !important;
}
.wp-core-ui #login .wp-generate-pw{
    color:white !important;
    background:#7E57C2 !important;
    border: none !important;
}
 .js.login-action-rp input[type=password]{
    border-radius: 15px;
 }
 .pw-weak input[type=checkbox]:checked:before {
    content: url('https://especializacioneseliteed.com/wp-content/uploads/2025/11/check.png'); 
    margin: -2px 0 0 -4px;
}
.login-action-rp .wp-generate-pw {
    display: none !important;
}
/* Título para recuperar contraseña */
.login-action-rp .reset-password-title,
.login-action-resetpass .reset-password-title,
.login-action-lostpassword .reset-password-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Ocultar logo en recuperar contraseña */
.login-action-rp .wp-login-logo,
.login-action-resetpass .wp-login-logo {
    display: none !important;
}
/* Enlace "Ir a ELITEED" en reset password */
.reset-home-link {
    text-align: center;
    margin-top: 20px;
}
.reset-home-link a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;

}
.reset-home-link a:hover {
    text-decoration: underline;
}
.login .custom-message{
    border: none !important;
    border-radius: 20px;
    background: #639ED2 !important;
    color: white;
}
a{
    color: #ffffff !important;
    font-weight: 700;
}