/* ==========================================================================
   Simulador Login Skin — wp-login.php reestilizado
   Desktop (>900px): split-screen panel fixed 34% izq | formulario 66% der
   Mobile  (≤900px): panel oscuro OCULTO, formulario ocupa toda la pantalla
   ========================================================================== */

:root {
    --sls-navy:    #0f2044;
    --sls-blue:    #1e56b0;
    --sls-indigo:  #3b5bdb;
    --sls-accent:  #5b8def;
    --sls-light:   #f0f4ff;
    --sls-border:  #dde6f5;
    --sls-slate:   #64748b;
    --sls-ink:     #0f2044;
    --sls-red:     #dc2626;
    --sls-green:   #16a34a;
    --sls-panel-w: 34%;
}

html, body.login { margin: 0; padding: 0; }
html { overflow-x: hidden; }

body.login {
    background: var(--sls-light) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
}

/* ==========================================================================
   PANEL OSCURO — oculto por defecto (mobile-first), visible solo en desktop
   ========================================================================== */
.sls-brand { display: none; }

/* ==========================================================================
   FORMULARIO — ocupa toda la pantalla en mobile
   ========================================================================== */
body.login div#login {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 36px 20px 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    justify-content: center;
}

body.login div#login > * {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

/* ---- Logo sobre el formulario -------------------------------------------- */
body.login #login h1 { margin-bottom: 8px; }
body.login #login h1 a {
    background: no-repeat center center / contain;
    height: 58px; width: 100%;
    display: block; margin: 0 auto 4px;
    text-indent: -9999px;
}

/* ---- Mensajes de OW / WP ------------------------------------------------- */
body.login .message,
body.login #login_error,
body.login .notice,
body.login #login .notice {
    border-radius: 11px !important;
    /* border: 1.5px solid var(--sls-border) !important;*/
    border-left-width: 4px !important;
    padding: 12px 14px;
    font-size: 13.5px; line-height: 1.5;
    box-shadow: none; box-sizing: border-box;
    background: #fff; color: var(--sls-ink);
    margin-bottom: 12px;
}
body.login #login_error    { border-left-color: var(--sls-red)   !important; background: #fef2f2; color: #991b1b; }
body.login .message,
body.login .notice-info    { border-left-color: var(--sls-blue)  !important; background: #eff6ff; color: #1e40af; }
body.login .notice-success { border-left-color: var(--sls-green) !important; background: #f0fdf4; color: #15803d; }
body.login .notice-warning { border-left-color: #f59e0b          !important; background: #fffbeb; color: #92400e; }
body.login .notice-error   { border-left-color: var(--sls-red)   !important; background: #fef2f2; color: #991b1b; }

/* ---- Tarjeta del formulario ---------------------------------------------- */
body.login form {
    background: #fff;
    border: 1.5px solid var(--sls-border);
    border-radius: 16px;
    box-shadow: 0 10px 36px -10px rgba(15,32,68,.15);
    padding: 24px 22px;
    margin-top: 14px;
    box-sizing: border-box;
}

body.login form label {
    font-size: 13.5px; font-weight: 600;
    color: var(--sls-ink); line-height: 1.5;
}

/* Inputs */
body.login form .input,
body.login form input[type="text"],
body.login form input[type="email"],
body.login form input[type="password"],
body.login input.password-input {
    width: 100%; box-sizing: border-box;
    background: #fff;
    border: 1.5px solid var(--sls-border);
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 15px; color: var(--sls-ink);
    /* margin: 5px 0 4px;*/
    transition: border-color .15s, box-shadow .15s;
}
body.login form .input:focus,
body.login form input:focus,
body.login input.password-input:focus {
    border-color: var(--sls-indigo);
    box-shadow: 0 0 0 3px rgba(59,91,219,.13);
    outline: none;
}

/* Campos de OW Password
   Estructura: .wp-pwd > .user-pass-fields > (input + #password-requirements)
                        + button.wp-hide-pw
   El botón está FUERA de .user-pass-fields, así que position:absolute top:50%
   del .wp-pwd completo se desplaza cuando aparecen los requisitos.
   Solución: posicionar el botón relativo al input, no al contenedor. */
body.login .user-pass-wrap { margin-bottom: 10px; }

body.login .wp-pwd {
    position: relative;
    display: flex;
    align-items: flex-start;  /* alinear al top, no al centro */
}
body.login .wp-pwd .user-pass-fields {
    flex: 1;
    min-width: 0;
}
body.login .wp-pwd button.wp-hide-pw {
    /* Posición fija desde el top del contenedor, alineada con el input (44px alto aprox) */
    position: absolute;
    right: 8px;
    top: 8px;                  /* top fijo = queda siempre sobre el input */
    transform: none;           /* sin translateY que dependía del 50% dinámico */
    background: transparent; border: 0; color: var(--sls-slate);
    cursor: pointer; padding: 4px; box-shadow: none; outline: none; line-height: 1;
    z-index: 1;
}
body.login .wp-pwd button.wp-hide-pw:hover { color: var(--sls-indigo); }

/* El input de contraseña necesita padding-right para que el ojo no tape el texto */
body.login .wp-pwd .password-input {
    padding-right: 36px !important;
}

body.login #password-requirements,
body.login #confirm-password-error {
    font-size: 12px; border-radius: 7px; margin-top: 4px; padding: 6px 10px;
}

/* Recordarme */
body.login .forgetmenot {
    margin: 0 0 20px !important; font-weight: 500; font-size: 13px; color: var(--sls-slate);
}

/* Checkbox T&C */
body.login .sls-terms { margin: 4px 0 14px; font-size: 13px; line-height: 1.5; }
body.login .sls-terms label {
    display: flex; align-items: flex-start; gap: 8px;
    cursor: pointer; font-weight: 500; color: var(--sls-slate);
}
body.login .sls-terms input[type="checkbox"] {
    margin-top: 2px; width: 16px; height: 16px;
    accent-color: var(--sls-indigo); flex-shrink: 0; cursor: pointer;
}
body.login .sls-terms a { color: var(--sls-indigo); font-weight: 700; text-decoration: underline; }

/* ---- Botón principal ----------------------------------------------------- */
body.login form .button-primary,
body.login .submit .button-primary,
body.login #wp-submit {
    width: 100%; float: none; display: block;
    background: var(--sls-indigo); border: 0; border-radius: 9px;
    padding: 12px 18px; height: auto;
    font-size: 15px; font-weight: 700; line-height: 1.2; text-shadow: none;
    box-shadow: 0 6px 18px -6px rgba(59,91,219,.65);
    transition: background .18s, transform .06s; cursor: pointer; text-align: center;
}
body.login form .button-primary:hover,
body.login #wp-submit:hover { background: var(--sls-blue); }
body.login form .button-primary:active,
body.login #wp-submit:active { transform: translateY(1px); }
body.login .submit { margin-top: 2px; }

/* ---- Navegación inferior ------------------------------------------------- */
body.login #nav,
body.login #backtoblog {
    text-align: center; padding: 0; margin: 14px 0 0;
    font-size: 13px; text-shadow: none;
}
body.login #nav a,
body.login #backtoblog a { color: var(--sls-slate); font-weight: 600; transition: color .15s; }
body.login #nav a:hover,
body.login #backtoblog a:hover { color: var(--sls-indigo); }
body.login .privacy-policy-page-link { text-align: center; margin-top: 10px; }
body.login #reg_passmail { text-align: center; font-size: 12.5px; color: var(--sls-slate); margin-top: 8px; }

/* ==========================================================================
   DESKTOP — >900px: panel oscuro visible + split-screen
   ========================================================================== */
@media (min-width: 901px) {

    body.login { display: block; }

    /* ---- Panel oscuro: visible y fixed ----------------------------------- */
    .sls-brand {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: var(--sls-panel-w);
        height: 100vh;
        background:
            radial-gradient(ellipse 90% 60% at 20% 10%, rgba(59,91,219,.28) 0%, transparent 60%),
            linear-gradient(160deg, var(--sls-navy) 0%, #0b1a38 55%, #071020 100%);
        color: #fff;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 10;
    }

    /* Textura de grilla sutil */
    .sls-brand::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background-image:
            linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
        background-size: 40px 40px;
        mask-image: radial-gradient(ellipse 75% 75% at 75% 30%, #000 0%, transparent 70%);
    }

    /* Contenedor scrolleable */
    .sls-brand-scroll {
        position: relative; z-index: 1;
        height: 100%;
        box-sizing: border-box;
        padding: clamp(24px, 3.5vh, 48px) clamp(20px, 2.8vw, 38px);
        display: flex; flex-direction: column;
        justify-content: flex-start;
        gap: clamp(14px, 2vh, 22px);
        overflow-y: auto; overflow-x: hidden;
    }
    .sls-brand-scroll::-webkit-scrollbar { width: 4px; }
    .sls-brand-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 2px; }

    /* La sección inferior (testimonial/badges) se empuja al fondo */
    .sls-brand-top    { display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 20px); }
    .sls-brand-bottom { margin-top: auto; padding-top: clamp(10px, 1.8vh, 18px); }

    /* ---- Logo en el panel ------------------------------------------------ */
    .sls-brand-mark {
        display: inline-flex; align-items: center; gap: 10px;
        background: #fff; border-radius: 11px; padding: 9px 13px;
        align-self: flex-start;
        box-shadow: 0 6px 20px -6px rgba(0,0,0,.45);
        flex-shrink: 0;
    }
    .sls-brand-logo {
        display: block;
        width: clamp(130px, 13vw, 180px); height: clamp(36px, 3.5vh, 48px);
        background: no-repeat left center / contain;
    }
    .sls-brand-icon {
        width: 34px; height: 34px; border-radius: 8px;
        background: linear-gradient(150deg, var(--sls-indigo), var(--sls-blue));
        display: inline-flex; align-items: center; justify-content: center;
        color: #fff; font-size: 18px;
    }
    .sls-brand-name {
        font-family: 'Lora', Georgia, serif;
        font-size: 15px; font-weight: 700; color: var(--sls-navy); line-height: 1.15;
    }

    /* ---- Titular a dos tonos --------------------------------------------- */
    .sls-headline {
        font-family: 'Lora', Georgia, serif;
        font-size: clamp(26px, 2.6vw, 38px);
        font-weight: 700; line-height: 1.18;
        letter-spacing: -.02em; margin: 0;
        max-width: 16ch;
    }
    .sls-headline .sls-h-main   { color: #fff; }
    .sls-headline .sls-h-accent { color: var(--sls-accent); }

    .sls-subtitle {
        font-size: clamp(12.5px, 1vw, 15px);
        line-height: 1.6; color: rgba(255,255,255,.78); margin: 0;
        max-width: 36ch;
    }

    /* ---- Lista de beneficios (login) ------------------------------------- */
    .sls-features {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column;
        gap: clamp(8px, 1.2vh, 14px);
    }
    .sls-feature { display: flex; align-items: flex-start; gap: 11px; }
    .sls-feature-icon {
        flex-shrink: 0;
        width: 32px; height: 32px; border-radius: 8px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.13);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--sls-accent); font-size: 15px;
    }
    .sls-feature-body  { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
    .sls-feature-title { font-weight: 700; font-size: clamp(12px, 0.95vw, 14px); color: #fff; line-height: 1.25; }
    .sls-feature-desc  { font-size: clamp(11px, 0.82vw, 12.5px); line-height: 1.45; color: rgba(255,255,255,.58); }

    /* ---- Lista de pasos (registro) --------------------------------------- */
    .sls-steps {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column;
        gap: clamp(8px, 1.3vh, 14px);
    }
    .sls-step { display: flex; align-items: flex-start; gap: 11px; }
    .sls-step-num {
        flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
        background: rgba(91,141,239,.16);
        border: 1.5px solid rgba(91,141,239,.45);
        color: var(--sls-accent); font-weight: 700; font-size: 12.5px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .sls-step-body  { display: flex; flex-direction: column; gap: 1px; padding-top: 3px; }
    .sls-step-title { font-weight: 700; font-size: clamp(12px, 0.95vw, 14px); color: #fff; line-height: 1.25; }
    .sls-step-desc  { font-size: clamp(11px, 0.82vw, 12.5px); line-height: 1.45; color: rgba(255,255,255,.58); }

    /* ---- Badges (registro) ----------------------------------------------- */
    .sls-badges {
        display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
        padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1);
    }
    .sls-badge {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: 11.5px; color: rgba(255,255,255,.7);
    }
    .sls-badge i { color: var(--sls-green); font-size: 13px; }

    /* ---- Carrusel de testimonios (login) --------------------------------- */
    .sls-carousel { position: relative; }
    .sls-carousel-track { position: relative; }

    .sls-tst {
        display: block;
        position: absolute; top: 0; left: 0; right: 0;
        margin: 0; padding: 16px 18px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.11);
        border-radius: 13px;
        opacity: 0; visibility: hidden;
        transform: translateY(8px);
        transition: opacity .45s ease, transform .45s ease, visibility .45s;
        pointer-events: none;
    }
    .sls-tst.is-active {
        position: relative; top: auto; left: auto; right: auto;
        opacity: 1; visibility: visible; transform: none;
        pointer-events: auto;
    }

    .sls-tst-quote  {
        font-family: 'Lora', Georgia, serif; font-style: italic;
        font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.6;
        margin: 0 0 12px; padding: 0;
        color: rgba(255,255,255,.92);
        quotes: none; /* las comillas vienen del HTML, no de CSS */
    }
    .sls-tst-cap    { display: flex; align-items: center; gap: 9px; }
    .sls-tst-avatar {
        width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
        background: linear-gradient(150deg, var(--sls-indigo), var(--sls-blue));
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .02em;
    }
    .sls-tst-meta   { display: flex; flex-direction: column; }
    .sls-tst-author { font-weight: 700; font-size: 12.5px; color: #fff; }
    .sls-tst-role   { font-size: 11.5px; color: rgba(255,255,255,.55); }

    .sls-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
    .sls-dot {
        width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer;
        background: rgba(255,255,255,.22); border: 0;
        transition: background .25s, width .2s;
    }
    .sls-dot.is-active { background: var(--sls-accent); width: 18px; border-radius: 3px; }

    /* ---- Formulario: desplazado al 34% derecho --------------------------- */
    body.login div#login {
        width: calc(100% - var(--sls-panel-w));
        margin: 0 0 0 var(--sls-panel-w);
        padding: 0 clamp(24px, 4vw, 64px);
        min-height: 100vh;
        justify-content: center;
    }
    body.login div#login > * { max-width: 380px; }
    body.login form { padding: 26px 24px; }
    body.login #login h1 a { height: 60px; }
}

/* ---- Overlay auth de WP -------------------------------------------------- */
#wp-auth-check-wrap { display: none !important; }