/* =========================================================
   PAGINA DE CUENTA / REGISTRO  (pedido Matias 26/06, punto 1)
   ---------------------------------------------------------
   Solo aplica en /my-account/ cuando NO hay sesion iniciada (login + registro).
   Encolado condicional en functions.php: is_account_page() && ! is_user_logged_in().

   Markup (WoodMart 8.5.1 + override del child form-login.php):
     .naccato-registration-page
       .wd-grid-f-col#customer_login
         .col-login          -> .woocommerce-form-login   (1b: centrar)
         .col-register        -> .naccato-reg-promo + .woocommerce-form-register

   Tokens de marca en variables.css. Solo presentacion, reversible.
   ========================================================= */

/* ----- Layout general de las dos columnas ----- */
.naccato-registration-page .wd-grid-f-col {
    align-items: stretch;
}

/* ---------------------------------------------------------
   1b. COLUMNA DE LOGIN CENTRADA (desktop y responsive)
   Centra el titulo, el formulario y sus campos respecto al bloque.
========================================================= */
.naccato-registration-page .col-login {
    text-align: center;
}

.naccato-registration-page .col-login .wd-login-title {
    text-align: center;
}

.naccato-registration-page .col-login .woocommerce-form-login {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* labels/inputs alineados a la izquierda dentro del bloque centrado */
}

/* El footer del login (recordarme + perdiste tu contrasena) centrado. */
.naccato-registration-page .col-login .login-form-footer {
    justify-content: center;
    text-align: center;
}

/* El boton de login ocupa el ancho del bloque centrado. */
.naccato-registration-page .col-login .woocommerce-form-login__submit {
    width: 100%;
}

/* ---------------------------------------------------------
   1c. BLOQUE PROMO DE LA COLUMNA DERECHA (15% OFF)
========================================================= */
.naccato-registration-page .naccato-reg-promo {
    background: var(--color-brand-pale);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.naccato-registration-page .naccato-reg-promo__title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-2xl);
    line-height: 1.15;
    color: var(--color-brand-primary);
    text-transform: none;
}

.naccato-registration-page .naccato-reg-promo__text {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* CTA "REGISTRARME AHORA": boton de marca, ancho del bloque. */
.naccato-registration-page .col-register .woocommerce-form-register button[name="register"] {
    width: 100%;
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: var(--radius-md);
}

.naccato-registration-page .col-register .woocommerce-form-register button[name="register"]:hover {
    background: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
}

/* El texto de privacidad (option WC) y el "te enviaremos un correo..." legibles. */
.naccato-registration-page .col-register .woocommerce-form-register p {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   UX-027 (2026-07-15, Matias 14/07 punto 3b): en el modo REGISTER
   (?action=register) el panel derecho quedaba en ingles ("Or" / "Login" /
   parrafo registration-info). Matias pidio sacarlo. Se oculta el panel y la
   columna de registro pasa a ancho completo. Reversible (borrar este bloque).
   Scope .active-register -> el modo login (?action=login) NO se toca.
========================================================= */
.naccato-registration-page.active-register .col-register-text {
    display: none;
}
.naccato-registration-page.active-register #customer_login > .col-register {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ---------------------------------------------------------
   Responsive: en mobile, login centrado a ancho completo y
   columnas apiladas (WoodMart ya apila; reforzamos el centrado).
========================================================= */
@media (max-width: 768px) {
    .naccato-registration-page .col-login .woocommerce-form-login {
        max-width: 100%;
    }
}