/**
 * WSSF · Pantalla de login (wp-login.php / WPS Hide Login).
 * Se carga después del sistema de diseño del tema (tokens, componentes).
 * Los !important son necesarios: pisan el login.css de WordPress, que tiene
 * selectores muy específicos.
 */
:root { color-scheme: light; }

/* Reset de fondo de WP. Layout: scroll natural desde top (no centrado
   vertical) para evitar que el h1 quede cortado por el viewport en
   mobile cuando el contenido excede el alto. */
body.login {
    background: var(--sf-bg) !important;
    font-family: var(--sf-font-sans);
    color: var(--sf-text);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 32px var(--sf-space-4) var(--sf-space-4);
}
@media (min-width: 768px) {
    body.login {
        justify-content: center;
        padding: var(--sf-space-4);
    }
}
/* Ocultar language switcher nativo de WP (huérfano si remove_action falla) */
body.login .language-switcher,
body.login #language-switcher,
body.login form[action*="wp-login.php"][name="loginform-language-switcher"],
body.login p.langswitcher,
body.login form#language-switcher,
body.login p#language-switcher {
    display: none !important;
}

body.login.wssf-login-body { background: var(--sf-bg); }

/* Hero / logo container */
body.login #login {
    width: 100%;
    max-width: 420px;
    padding: 0;
    margin: 0;
}

/* Logo header */
body.login h1 {
    text-align: center;
    margin: 0 0 var(--sf-space-6);
}

body.login h1 a {
    display: inline-block;
    background: none !important;
    background-image: none !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: var(--sf-text-3xl);
    font-weight: var(--sf-fw-bold);
    color: var(--sf-text);
    text-decoration: none;
    letter-spacing: -0.02em;
    line-height: 1;
    background-image: none !important;
    outline: none;
}

/* Logo SVG real (Sascha Fitness). Reemplaza el placeholder cuadrado. */
body.login h1 a::before {
    content: '';
    display: block;
    width: 110px;
    height: 110px;
    margin: 0 auto var(--sf-space-3);
    background-image: var(--wssf-login-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Eliminar el "S" placeholder (no se usa con logo SVG) */
body.login h1 a::after {
    content: none;
}

/* Subtítulo "Portal Distribuidores" */
body.login .wssf-login-subtitle {
    text-align: center;
    color: var(--sf-text-muted);
    font-size: var(--sf-text-sm);
    margin: 0 0 var(--sf-space-6);
    letter-spacing: 0.02em;
}

/* Form container */
body.login form {
    background: var(--sf-card);
    border: 1px solid var(--sf-border-soft);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-md);
    padding: var(--sf-space-8) var(--sf-space-6);
    margin: 0;
    overflow: visible;
}

body.login form p { margin: var(--sf-space-3) 0; }

body.login label {
    display: block;
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-fw-medium);
    color: var(--sf-text);
    margin-bottom: var(--sf-space-2);
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
    width: 100%;
    min-height: var(--sf-touch-target);
    padding: var(--sf-space-3) var(--sf-space-4);
    font-size: var(--sf-text-base);
    font-family: var(--sf-font-sans);
    line-height: 1.4;
    color: var(--sf-text);
    background: var(--sf-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    transition:
        border-color var(--sf-duration-fast) var(--sf-ease),
        box-shadow var(--sf-duration-fast) var(--sf-ease);
    box-shadow: none;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
    border-color: var(--sf-primary-500);
    box-shadow: var(--sf-focus-ring);
    outline: none;
}

body.login .input,
body.login input[type="text"] { font-family: var(--sf-font-sans); }

/* Botón submit */
body.login .button-primary,
body.login #wp-submit {
    width: 100%;
    min-height: var(--sf-touch-target);
    padding: var(--sf-space-3) var(--sf-space-5);
    font-size: var(--sf-text-base);
    font-family: var(--sf-font-sans);
    font-weight: var(--sf-fw-semibold);
    line-height: 1;
    color: var(--sf-text-invert);
    background: var(--sf-primary-500);
    border: none;
    border-radius: var(--sf-radius-sm);
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background var(--sf-duration-fast) var(--sf-ease);
    float: none;
    margin: var(--sf-space-4) 0 0;
}

body.login .button-primary:hover,
body.login #wp-submit:hover {
    background: var(--sf-primary-600);
    box-shadow: none;
}

body.login .button-primary:active,
body.login #wp-submit:active {
    transform: translateY(1px);
}

/* "Recordarme" checkbox */
body.login .forgetmenot {
    font-size: var(--sf-text-sm);
    color: var(--sf-text-muted);
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
    margin: var(--sf-space-4) 0 0;
}

body.login .forgetmenot input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--sf-primary-500);
}

/* Links debajo del form */
body.login #nav,
body.login #backtoblog {
    text-align: center;
    font-size: var(--sf-text-sm);
    margin: var(--sf-space-4) 0 0;
    padding: 0;
}

body.login #nav a,
body.login #backtoblog a {
    color: var(--sf-text-muted);
    text-decoration: none;
    font-weight: var(--sf-fw-medium);
    transition: color var(--sf-duration-fast) var(--sf-ease);
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: var(--sf-primary-700);
}

body.login #nav a {
    color: var(--sf-primary-700);
}

/* Mensajes de error / éxito */
body.login .message,
body.login #login_error,
body.login .notice {
    background: var(--sf-bg-alt);
    border-left: 3px solid var(--sf-info);
    border-radius: var(--sf-radius-sm);
    padding: var(--sf-space-3) var(--sf-space-4);
    font-size: var(--sf-text-sm);
    margin: 0 0 var(--sf-space-4);
    color: var(--sf-text);
    box-shadow: none;
}

body.login #login_error {
    background: var(--sf-error-bg);
    border-left-color: var(--sf-error);
    color: var(--sf-error);
}

body.login .message {
    background: var(--sf-info-bg);
    border-left-color: var(--sf-info);
    color: var(--sf-info);
}

/* Footer login — replica el footer del sitio */
.wssf-login-footer {
    text-align: center;
    font-size: var(--sf-text-xs);
    color: var(--sf-text-subtle);
    margin: var(--sf-space-8) 0 var(--sf-space-4);
    line-height: var(--sf-lh-relaxed);
}

.wssf-login-footer p { margin: 0 0 4px; }
.wssf-login-footer-tiny { opacity: 0.75; font-size: 11px; }

.wssf-login-footer a {
    color: var(--sf-text-muted);
    text-decoration: none;
}

.wssf-login-footer a:hover { color: var(--sf-primary-700); }

/* Quitar elementos visuales de WP que no encajan */
body.login .privacy-policy-page-link { display: none; }
/* Ocultar "Ir a Sascha Fitness" — el portal es B2B privado, no hay home pública */
body.login #backtoblog { display: none !important; }

/* Mobile tweaks */
@media (max-width: 480px) {
    body.login form {
        padding: var(--sf-space-6) var(--sf-space-5);
        border-radius: var(--sf-radius-md);
    }
    body.login h1 a { font-size: var(--sf-text-2xl); }
}

/* Forzar light mode siempre (anti dark-mode mobile/iOS donde tokens
   dinámicos invierten colores y los textos quedan ilegibles). */
html.login,
body.login,
body.login #login,
body.login form {
    color-scheme: light !important;
}
body.login,
body.login form,
body.login form label,
body.login form input[type="text"],
body.login form input[type="password"],
body.login form input[type="email"],
body.login form .forgetmenot,
body.login #nav,
body.login #backtoblog,
body.login .wssf-login-footer {
    background-color: initial !important;
    color: initial !important;
}
body.login {
    background: #FAFAFA !important;
    color: #1A1A1A !important;
}
body.login form {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border: 1px solid #E5E5E5 !important;
}
body.login form label {
    color: #1A1A1A !important;
}
body.login form input[type="text"],
body.login form input[type="password"],
body.login form input[type="email"] {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border: 1px solid #C7C7C7 !important;
    -webkit-text-fill-color: #1A1A1A !important;
}
body.login h1 a {
    color: #1A1A1A !important;
}
body.login .forgetmenot,
body.login .forgetmenot label {
    color: #6B6B6B !important;
}
body.login #nav a,
body.login #backtoblog a {
    color: #6B6B6B !important;
}
body.login .wssf-login-footer,
body.login .wssf-login-footer p,
body.login .wssf-login-footer a {
    color: #6B6B6B !important;
}
/* Submit button: max specificity para sobreescribir cualquier override */
html body.login form #wp-submit,
html body.login form input#wp-submit,
html body.login form input.button-primary,
html body.login .button-primary,
html body.login #wp-submit {
    background: #1A1A1A !important;
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 1px solid #1A1A1A !important;
    border-color: #1A1A1A !important;
    text-shadow: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
html body.login form #wp-submit:hover,
html body.login form #wp-submit:focus {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
/* iOS Safari autofill rompe contraste — forzar */
body.login input:-webkit-autofill,
body.login input:-webkit-autofill:hover,
body.login input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
    -webkit-text-fill-color: #1A1A1A !important;
    caret-color: #1A1A1A !important;
}