/* =============================================================================
   DKT Store — Acceso v2 (0.9.163, propuesta aprobada por Ricardo 08-sep-2026)
   Página de Iniciar sesión / Crear cuenta: una tarjeta con dos pestañas + panel de marca con foto
   real, con el lenguaje de Mi cuenta v2. Markup: woocommerce/myaccount/form-login.php.
   Carga solo para invitados en la página de la cuenta, después de account-v2.css.
   Los botones de Google/Facebook son los del plugin Nextend (.nsl-*): aquí solo se visten y se
   ordenan (order) debajo del botón principal, sin mover sus ganchos.
   @package astra-dkt-store
   ============================================================================= */

/* ---------- la página ---------- */
body.woocommerce-account:not(.logged-in) .site-content { padding-top: 22px !important; }
body.woocommerce-account:not(.logged-in) .woocommerce { display: block; background: transparent; padding: 0; }
/* avisos (error de acceso, registro hecho…) sobre la tarjeta, con el estilo de la casa */
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-message,
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-info {
  max-width: 1040px; margin: 0 auto 16px; background: var(--dkt-white); border: 1px solid var(--dkt-line); border-left: 4px solid var(--dkt-magenta);
  border-radius: var(--dkt-radius); padding: 14px 16px; font-size: 13.5px; color: var(--dkt-ink); box-shadow: var(--dkt-shadow-sm);
}
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-error::before,
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-message::before,
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-info::before { display: none; }

/* ---------- la tarjeta ---------- */
.dkt-login {
  max-width: 1040px; margin: 0 auto var(--space-7, 3rem);
  background: var(--dkt-white); border: 1px solid var(--dkt-line); border-radius: 18px;
  box-shadow: 0 30px 70px -28px rgba(110, 16, 57, .45), var(--dkt-shadow-sm);
  display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; min-height: 620px;
}

/* ---------- panel de marca con foto real ---------- */
.dkt-login__brand {
  position: relative; isolation: isolate; color: #fff;
  padding: 34px 34px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  background-color: #4a0b2a; background-position: center top; background-size: cover; background-repeat: no-repeat;
}
.dkt-login__brand::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(74, 11, 42, .35) 0%, rgba(74, 11, 42, .62) 45%, rgba(56, 8, 32, .94) 100%); }
.dkt-login__brand > * { position: relative; z-index: 1; }
.dkt-login__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dkt-font-titles); font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dkt-pink-lt, #F7A8CE); }
.dkt-login__eyebrow i { width: 18px; height: 2px; background: var(--dkt-pink-lt, #F7A8CE); display: inline-block; }
.dkt-login__brand h2 { font-family: var(--dkt-font-titles); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; color: #fff; margin: 12px 0 0; text-wrap: balance; }
.dkt-login__brand .lead { margin: 10px 0 0; font-size: .95rem; color: rgba(255, 255, 255, .88); max-width: 34ch; }
.dkt-login__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* 0.9.165 (Ricardo): las fichas se perdían contra el fondo → blancas, con texto vino e icono magenta, como en Mi cuenta */
.dkt-login__perks li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .6); color: var(--dkt-vino); font-family: var(--dkt-font-titles); font-size: 13px; font-weight: 600; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .35); }
.dkt-login__perks .qi { width: 32px; height: 32px; border-radius: 9px; background: rgba(165, 0, 80, .10); color: var(--dkt-magenta); display: grid; place-items: center; }
.dkt-login__perks svg { width: 17px; height: 17px; }
.dkt-login__seal { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.dkt-login__seal svg { width: 15px; height: 15px; color: #7fd1c1; flex: none; }

/* ---------- formularios ---------- */
.dkt-login__forms { padding: 34px 40px 36px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dkt-login__toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--dkt-paper-2, #F6EEF2); border-radius: 999px; padding: 4px; gap: 4px; }
body.woocommerce-account .dkt-login__toggle button {
  appearance: none; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-family: var(--dkt-font-titles) !important; font-weight: 600 !important; font-size: 13.5px !important; color: var(--dkt-ink-soft, #6E5A65) !important;
  padding: 10px 12px !important; border-radius: 999px !important; cursor: pointer; transition: background .15s ease, color .15s ease; min-height: 0 !important; line-height: 1.2 !important;
}
body.woocommerce-account .dkt-login__toggle button[aria-selected="true"] { background: var(--dkt-magenta) !important; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(165, 0, 80, .6) !important; }
body.woocommerce-account .dkt-login__toggle button:focus-visible { outline: 2px solid var(--dkt-pink-lt, #F7A8CE); outline-offset: 2px; }
.dkt-login__pane[hidden] { display: none; }
.dkt-login__pane { display: flex; flex-direction: column; gap: 14px; }
.dkt-login__pane h2 { font-family: var(--dkt-font-titles); font-size: 1.35rem; color: var(--dkt-vino); margin: 0; }
.dkt-login__pane .sub { margin: -8px 0 0; font-size: .9rem; color: var(--dkt-ink-soft, #6E5A65); max-width: 44ch; }
.dkt-login form.woocommerce-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.dkt-login form.woocommerce-form > * { margin: 0; }
/* orden visual: campos → recuérdame → botón → separador → Google/Facebook → privacidad → letra chica */
.dkt-login form.woocommerce-form > .dkt-login__field { order: 1; }
.dkt-login form.woocommerce-form > .dkt-login__row { order: 2; }
.dkt-login form.woocommerce-form > .dkt-login__submit { order: 3; }
.dkt-login form.woocommerce-form > .dkt-login__divider { order: 4; }
.dkt-login form.woocommerce-form > .nsl-container { order: 5; }
.dkt-login form.woocommerce-form > .woocommerce-privacy-policy-text { order: 6; }
.dkt-login form.woocommerce-form > .dkt-login__fine { order: 7; }
.dkt-login form.woocommerce-form > .dkt-registro-anchor,
.dkt-login form.woocommerce-form > wc-order-attribution-inputs { order: 0; }

/* campos */
.dkt-login__field { display: flex; flex-direction: column; gap: 6px; }
.dkt-login__field label { font-family: var(--dkt-font-titles); font-size: 12.5px; font-weight: 600; color: var(--dkt-vino); margin: 0; }
.dkt-login__field label .required { color: var(--dkt-magenta); text-decoration: none; }
body.woocommerce-account .dkt-login .woocommerce-Input,
body.woocommerce-account .dkt-login input.input-text {
  width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--dkt-line); border-radius: 12px; background: var(--dkt-soft, #FCF7FA);
  font-family: var(--dkt-font-body); font-size: 15px; color: var(--dkt-ink); outline: 0; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.woocommerce-account .dkt-login .woocommerce-Input:focus,
body.woocommerce-account .dkt-login input.input-text:focus { border-color: var(--dkt-magenta); background: #fff; box-shadow: 0 0 0 3px rgba(165, 0, 80, .10); }
.dkt-login input::placeholder { color: #B39AA6; }
/* el ojo de la contraseña (WooCommerce lo añade por JS como <button>) va DENTRO del campo, discreto:
   0.9.165 — el clobber global de botones lo pintaba como un bloque magenta de 56 px (Ricardo: "quedó muy mal") */
.dkt-login .password-input { position: relative; display: block; width: 100%; }
.dkt-login .password-input input { padding-right: 48px; }
body.woocommerce-account .dkt-login button.show-password-input,
body.woocommerce-account .dkt-login .show-password-input {
  position: absolute !important; right: 6px !important; top: 50% !important; translate: 0 -50% !important; transform: none !important;
  width: 36px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important;
  color: var(--dkt-muted) !important; cursor: pointer; display: grid !important; place-items: center;
}
body.woocommerce-account .dkt-login button.show-password-input:hover,
body.woocommerce-account .dkt-login button.show-password-input:focus-visible { background: var(--dkt-blush, #FBEEF4) !important; color: var(--dkt-magenta) !important; }
body.woocommerce-account .dkt-login .show-password-input::after { position: static; margin: 0; color: inherit; font-size: 17px; }
body.woocommerce-account .dkt-login .show-password-input.display-password::after { opacity: 1; color: var(--dkt-magenta); }
/* el autocompletado del navegador no debe teñir los campos de azul */
.dkt-login input:-webkit-autofill, .dkt-login input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--dkt-soft, #FCF7FA) inset !important; -webkit-text-fill-color: var(--dkt-ink) !important; caret-color: var(--dkt-ink); }

/* recuérdame + olvidé */
.dkt-login__row { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.dkt-login__row .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--dkt-ink-soft, #6E5A65); cursor: pointer; margin: 0; }
.dkt-login__row .woocommerce-form__input-checkbox { width: 18px; height: 18px; margin: 0; accent-color: var(--dkt-magenta); border-radius: 6px; }
.dkt-login__lost { color: var(--dkt-magenta); font-weight: 600; text-decoration: none; }
.dkt-login__lost:hover { color: var(--dkt-vino); }

/* botón principal (blindado contra el clobber global de botones) */
body.woocommerce-account .dkt-login button.button,
body.woocommerce-account .dkt-login .woocommerce-button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 48px !important;
  padding: 0 18px !important; border-radius: 12px !important; border: 1.5px solid var(--dkt-magenta) !important;
  background: var(--dkt-magenta) !important; color: #fff !important; font-family: var(--dkt-font-titles) !important; font-weight: 600 !important; font-size: 14.5px !important;
  line-height: 1.2 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
body.woocommerce-account .dkt-login button.button:hover,
body.woocommerce-account .dkt-login .woocommerce-button:hover { background: var(--dkt-magenta-mid, #C42A78) !important; border-color: var(--dkt-magenta-mid, #C42A78) !important; transform: translateY(-1px); }

/* separador */
.dkt-login__divider { display: flex; align-items: center; gap: 12px; font-family: var(--dkt-font-titles); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dkt-muted); }
.dkt-login__divider::before, .dkt-login__divider::after { content: ""; flex: 1; height: 1px; background: var(--dkt-line); }

/* Google / Facebook (Nextend): dos botones blancos iguales, con su logo */
.dkt-login .nsl-container { width: 100%; }
/* 0.9.164: el plugin fija `grid-template-columns: minmax(145px, auto)` con más especificidad → !important aquí */
.dkt-login div.nsl-container .nsl-container-buttons { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100%; padding: 0 !important; }
.dkt-login div.nsl-container .nsl-container-buttons > a { display: block !important; width: auto !important; margin: 0 !important; }
.dkt-login .nsl-container .nsl-button {
  display: flex !important; align-items: center; justify-content: center; gap: 8px; height: 48px; width: 100%; padding: 0 14px !important;
  background: #fff !important; color: var(--dkt-ink) !important; border: 1.5px solid var(--dkt-line) !important; border-radius: 12px !important; box-shadow: none !important;
  font-family: var(--dkt-font-titles) !important; font-weight: 600 !important; font-size: 13.5px !important; cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.dkt-login .nsl-container .nsl-button:hover { border-color: var(--dkt-magenta) !important; transform: translateY(-1px); }
.dkt-login .nsl-container .nsl-button .nsl-button-svg-container { display: grid; place-items: center; width: 20px; height: 20px; padding: 0 !important; margin: 0 !important; flex: none; background: transparent; }
.dkt-login .nsl-container .nsl-button .nsl-button-svg-container svg { width: 20px; height: 20px; }
/* 0.9.165: el logo de Facebook del plugin ya es el círculo oficial con la "f" recortada; solo se pinta de azul
   (antes iba blanco sobre un círculo azul propio, y se veía "generado") */
.dkt-login .nsl-container .nsl-button-facebook .nsl-button-svg-container svg,
.dkt-login .nsl-container .nsl-button-facebook .nsl-button-svg-container svg path { fill: #1877F2 !important; }
.dkt-login .nsl-container .nsl-button .nsl-button-label-container { padding: 0 !important; margin: 0 !important; color: var(--dkt-ink) !important; font: inherit !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.2 !important; white-space: nowrap; }
.dkt-login .nsl-container .nsl-button .nsl-button-label-container b { font-weight: 700; }

/* letra chica y privacidad */
.dkt-login__fine, .dkt-login .woocommerce-privacy-policy-text p { font-size: 12px; color: var(--dkt-muted); margin: 0; }
.dkt-login .woocommerce-privacy-policy-text a { color: var(--dkt-magenta); font-weight: 600; }

/* tarjeta para profesionales */
.dkt-login__pro { margin-top: 4px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--dkt-blush, #FBEEF4); border: 1px solid var(--dkt-rose, #F4D9E6); }
.dkt-login__pro .qi { width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--dkt-magenta); display: grid; place-items: center; }
.dkt-login__pro .qi svg { width: 18px; height: 18px; }
.dkt-login__pro .tx b { display: block; font-family: var(--dkt-font-titles); font-size: 13px; font-weight: 600; color: var(--dkt-vino); }
.dkt-login__pro .tx small { display: block; font-size: 12px; color: var(--dkt-ink-soft, #6E5A65); }
.dkt-login__link { color: var(--dkt-magenta); font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none; }
.dkt-login__link:hover { color: var(--dkt-vino); }

/* ---------- móvil / tablet ---------- */
@media (max-width: 900px) {
  .dkt-login { grid-template-columns: 1fr; min-height: 0; border-radius: 16px; }
  .dkt-login__brand { padding: 22px 18px 18px; gap: 14px; background-position: center 20%; }
  .dkt-login__brand h2 { font-size: 1.35rem; }
  .dkt-login__brand .lead { font-size: .88rem; }
  .dkt-login__perks, .dkt-login__seal { display: none; }
  .dkt-login__forms { padding: 18px 16px 22px; }
}
@media (max-width: 560px) {
  body.woocommerce-account:not(.logged-in) .site-content { padding-top: 10px !important; }
  .dkt-login div.nsl-container .nsl-container-buttons { grid-template-columns: 1fr !important; }
  .dkt-login__pro { grid-template-columns: 36px 1fr; }
  .dkt-login__pro .dkt-login__link { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .dkt-login * { transition: none !important; transform: none !important; }
}

/* 0.9.188: Turnstile en Crear cuenta (widget flexible de Cloudflare). */
.dkt-login__pane .dkt-login__turnstile{margin:2px 0 14px;min-height:65px}