/*
 * =================================================
 * STARTER KIT CSS MODO OSCURO (DARK MODE)
 * VERSIÓN 2.0 - APLICA A LOGIN, REGISTRO Y CONTRASEÑA OLVIDADA
 * =================================================
 */

/* --- Variables de Color (Fácil de personalizar) --- */
body.login {
    --color-fondo: #1a202c; /* Azul marino/gris muy oscuro */
    --color-formulario: #2d3748; /* Azul marino/gris más claro */
    --color-texto-principal: #e2e8f0; /* Blanco pálido */
    --color-texto-secundario: #a0aec0; /* Gris claro */
    --color-borde: #4a5568;
    --color-acento: #38b2ac; /* Turquesa/Teal */
    --color-acento-hover: #319795; /* Turquesa/Teal más oscuro */
}

/* --- Fondo de la Página --- */
body.login {
    background: var(--color-fondo);
}



/* --- Logo Personalizado (funciona en todas las páginas) --- */
#login h1 a, .login h1 a {
    background-image: url('https://www.recursos-biblicos.com/wp-content/uploads/2021/05/Logo_curvas_svg-1.svg'); /* ¡Pega la URL de tu logo aquí! */
    height: 80px;
    width: 100%;
    max-width: 320px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 25px;
}

/* --- El Formulario (ACTUALIZADO para aplicar a todos) --- */
#loginform,
#registerform,
#lostpasswordform,
#resetpassform {
    background: var(--color-formulario);
    border-radius: 12px;
    border: 1px solid var(--color-borde);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    padding: 40px;
    margin-top: 0;
}

/* --- Mensajes de Información o Error (ej. "Regístrate para...") --- */
#login #login_error, 
#login .message {
    border-radius: 8px;
    margin-top: 20px;
}

/* --- Etiquetas de los campos (ACTUALIZADO para aplicar a todos) --- */
#loginform label,
#registerform label,
#lostpasswordform label
 {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-texto-secundario);
}

#reg_passmail {
    color: var(--color-texto-secundario);
}

/* --- Campos de texto (Inputs) (ACTUALIZADO para aplicar a todos) --- */
#loginform input[type="text"],
#loginform input[type="password"],
#registerform input[type="text"],
#registerform input[type="email"],
#lostpasswordform input[type="text"] {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 16px;
    color: var(--color-texto-principal);
    box-shadow: none;
    margin-top: 8px;
}

/* --- Estilo cuando el campo está enfocado (ACTUALIZADO para aplicar a todos) --- */
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#registerform input[type="text"]:focus,
#registerform input[type="email"]:focus,
#lostpasswordform input[type="text"]:focus {
    border-color: var(--color-acento);
    box-shadow: 0 0 0 2px var(--color-acento-hover);
    outline: none;
}

/* --- Botón Principal (ACTUALIZADO para aplicar a todos) --- */
/* (Se aplica a "Acceder", "Registrarse", "Obtener una contraseña nueva") */
.wp-core-ui .button-primary {
    background: var(--color-acento);
    border-color: var(--color-acento);
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    height: auto;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: none;
    box-shadow: none;
    transition: all 0.2s ease-in-out;
}

.wp-core-ui .button-primary:hover {
    background: var(--color-acento-hover);
    border-color: var(--color-acento-hover);
    transform: translateY(-2px);
}

/* --- Enlaces inferiores (funciona en todas las páginas) --- */
#nav, #backtoblog {
    text-align: center;
    padding: 20px 0 0 0;
}

#nav a, #backtoblog a {
    color: var(--color-texto-secundario);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

#nav a:hover, #backtoblog a:hover {
    color: var(--color-acento);
}