/*
 * PlayPalabras Account Page — Estilos del rediseño de /my-account/ (no logueado).
 *
 * v1.0.1 — Hard reset defensivo
 * --------------------------------------------------------
 * En v1.0.0 confiábamos en el scope `.ppap-wrap` para aislar el rediseño,
 * pero muchos themes (Astra, Storefront, Hello, GeneratePress) aplican CSS
 * con `!important` y alta especificidad sobre las clases nativas de WC
 * (`.woocommerce-form-row`, `.input-text`, `.button`, etc.). Resultado en
 * producción: inputs aplastados a ~200px en vez de width:100%, y el row
 * "recordarme + olvidé contraseña" se desbordaba del panel renderizándose
 * en una columna estrechísima fuera del card.
 *
 * v1.0.1 aplica:
 *   1. Reset global agresivo dentro del scope (no afecta al resto del sitio).
 *   2. !important donde el theme tiene !important — combatir fuego con fuego.
 *   3. Estructura `.ppap-options` simplificada (grid 2-col → bloque en móvil)
 *      en lugar del flex space-between que se colapsaba.
 *   4. `minmax(0, 1fr)` en el grid del card para evitar overflow horizontal.
 *   5. `.password-input` y `.show-password-input` estilizados explícitamente
 *      (WC inyecta esos wrappers vía JS y sin estilo se ven como cuadritos).
 *
 * Paleta heredada de la app PlayPalabras post-login:
 *   --purple: #7c5cfc  --purple-soft: #9b7eff
 *   --cyan:   #0fa87a  --cyan-soft:   #12d498
 *   --bg:     #f4f1ee  (beige cálido)
 *   --text:   #2d2a26  --text-muted:  #6b655d
 *   --bord:   #e0d8cf
 */

/* ============================================================
 * 1. CSS VARIABLES (scoped al wrapper)
 * ============================================================ */
.ppap-wrap {
  --ppap-purple: #7c5cfc;
  --ppap-purple-soft: #9b7eff;
  --ppap-cyan: #0fa87a;
  --ppap-cyan-soft: #12d498;
  --ppap-bg: #f4f1ee;
  --ppap-bg-soft: #faf6f2;
  --ppap-card: #ffffff;
  --ppap-text: #2d2a26;
  --ppap-text-muted: #6b655d;
  --ppap-text-faint: #9e958a;
  --ppap-border: #e0d8cf;
  --ppap-border-strong: #c8bfb4;
  --ppap-radius-lg: 20px;
  --ppap-radius-md: 14px;
  --ppap-radius-sm: 8px;
  --ppap-shadow: 0 4px 24px rgba(45, 42, 38, 0.10);
  --ppap-shadow-btn: 0 4px 20px rgba(124, 92, 252, 0.22);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--ppap-text);
  max-width: 980px;
  margin: 32px auto;
  padding: 0 16px;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* ============================================================
 * 2. HARD RESET — combatir CSS del theme
 * ============================================================ */
.ppap-wrap,
.ppap-wrap *,
.ppap-wrap *::before,
.ppap-wrap *::after {
  box-sizing: border-box;
  max-width: 100%;
}

/* Forms y rows de WC — el theme los pelea más */
.ppap-wrap form,
.ppap-wrap .woocommerce-form,
.ppap-wrap .ppap-form {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.ppap-wrap .ppap-field,
.ppap-wrap .woocommerce-form-row,
.ppap-wrap .form-row,
.ppap-wrap p.form-row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  border: 0 !important;
  background: none !important;
}

/* Esconder labels duplicados que algunos themes inyectan via WC hooks */
.ppap-wrap .woocommerce-form-row > label:first-of-type:not(.ppap-remember):not(.ppap-check-label) { }

/* ============================================================
 * 3. CARD CONTENEDOR
 * ============================================================ */
.ppap-wrap .ppap-card {
  display: grid !important;
  /* minmax(0, 1fr) en vez de 1fr — evita overflow cuando contenido es ancho */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0 !important;
  background: var(--ppap-card) !important;
  border: 1px solid var(--ppap-border) !important;
  border-radius: var(--ppap-radius-lg) !important;
  box-shadow: var(--ppap-shadow) !important;
  overflow: hidden !important;
  min-height: 580px;
  width: 100% !important;
}

/* ============================================================
 * 4. HERO (lado izquierdo)
 * ============================================================ */
.ppap-wrap .ppap-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 92, 252, 0.10), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(15, 168, 122, 0.10), transparent 45%),
    var(--ppap-bg) !important;
  padding: 44px 38px !important;
  display: flex !important;
  align-items: stretch !important;
  min-width: 0; /* permite que el contenido se encoja */
}
.ppap-wrap .ppap-hero-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ppap-wrap .ppap-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.ppap-wrap .ppap-brand-dot {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ppap-purple), var(--ppap-cyan));
  flex-shrink: 0;
}
.ppap-wrap .ppap-brand-name {
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em;
  color: var(--ppap-text) !important;
}
.ppap-wrap .ppap-hero-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  color: var(--ppap-text) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ppap-wrap .ppap-hero-sub {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ppap-text-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ppap-wrap .ppap-hero-bullets {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ppap-wrap .ppap-hero-bullets li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: var(--ppap-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ppap-wrap .ppap-hero-bullets li::before { content: none !important; }
.ppap-wrap .ppap-bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ppap-cyan);
  flex-shrink: 0;
}
.ppap-wrap .ppap-illus {
  margin-top: auto;
  padding-top: 16px;
  width: 100%;
  max-width: 280px;
  opacity: 0.92;
}
.ppap-wrap .ppap-illus svg { width: 100%; height: auto; display: block; }

/* ============================================================
 * 5. PANE (lado derecho — forms)
 * ============================================================ */
.ppap-wrap .ppap-pane {
  padding: 44px 38px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #fff !important;
  min-width: 0; /* permite encoger sin overflow */
  width: 100%;
}

/* ============================================================
 * 6. TABS
 * ============================================================ */
.ppap-wrap .ppap-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: var(--ppap-bg) !important;
  border-radius: var(--ppap-radius-sm) !important;
  margin: 0 0 22px !important;
  width: 100% !important;
}
.ppap-wrap .ppap-tab {
  flex: 1 1 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 10px 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ppap-text-muted) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background .2s, color .2s, box-shadow .2s;
  text-transform: none !important;
  letter-spacing: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.ppap-wrap .ppap-tab:hover { color: var(--ppap-text) !important; }
.ppap-wrap .ppap-tab.is-active {
  background: #fff !important;
  color: var(--ppap-text) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(45, 42, 38, 0.08) !important;
}

/* ============================================================
 * 7. NOTICES (errores de WC)
 * ============================================================ */
.ppap-wrap .ppap-notices { margin: 0 0 16px !important; width: 100%; }
.ppap-wrap .ppap-notices ul,
.ppap-wrap .ppap-notices .woocommerce-error,
.ppap-wrap .ppap-notices .woocommerce-message,
.ppap-wrap .ppap-notices .woocommerce-info {
  list-style: none !important;
  padding: 10px 14px !important;
  margin: 0 0 8px !important;
  border-radius: var(--ppap-radius-sm) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  border: 1px solid transparent !important;
}
.ppap-wrap .ppap-notices .woocommerce-error {
  background: #fdecec !important; border-color: #f3c0c0 !important; color: #8b1f1f !important;
}
.ppap-wrap .ppap-notices .woocommerce-message {
  background: #e6faf3 !important; border-color: #a8e6ce !important; color: #0a5c43 !important;
}
.ppap-wrap .ppap-notices .woocommerce-info {
  background: #eef2ff !important; border-color: #c7d0fb !important; color: #2a3994 !important;
}

/* ============================================================
 * 8. PANELS — solo el activo visible
 * ============================================================ */
.ppap-wrap .ppap-panel { display: none !important; width: 100% !important; }
.ppap-wrap .ppap-panel.is-active { display: block !important; }

/* ============================================================
 * 9. SOCIAL LOGIN (Nextend)
 * ============================================================ */
.ppap-wrap .ppap-social { margin: 0 0 14px !important; width: 100%; }
.ppap-wrap .ppap-social:empty { display: none !important; }
.ppap-wrap .ppap-social:empty + .ppap-divider { display: none !important; }
.ppap-wrap .ppap-social .nsl-container { width: 100% !important; }
.ppap-wrap .ppap-social .nsl-button {
  width: 100% !important;
  border-radius: var(--ppap-radius-sm) !important;
  font-family: inherit !important;
}

/* Divider "o con tu correo" */
.ppap-wrap .ppap-divider {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 14px 0 18px !important;
  width: 100% !important;
}
.ppap-wrap .ppap-divider::before,
.ppap-wrap .ppap-divider::after {
  content: "" !important;
  flex: 1 1 0 !important;
  height: 1px !important;
  background: var(--ppap-border) !important;
  display: block !important;
}
.ppap-wrap .ppap-divider span {
  font-size: 12px !important;
  color: var(--ppap-text-faint) !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
  background: none !important;
  padding: 0 !important;
}

/* ============================================================
 * 10. FORM FIELDS
 * ============================================================ */
.ppap-wrap .ppap-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.ppap-wrap .ppap-field > label,
.ppap-wrap .ppap-field label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ppap-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
.ppap-wrap .ppap-req {
  color: var(--ppap-purple) !important;
  font-weight: 600 !important;
}

/* Inputs — selectores muy específicos para ganar al theme */
.ppap-wrap input.ppap-input,
.ppap-wrap input[type="text"].ppap-input,
.ppap-wrap input[type="email"].ppap-input,
.ppap-wrap input[type="password"].ppap-input,
.ppap-wrap .ppap-form input[type="text"],
.ppap-wrap .ppap-form input[type="email"],
.ppap-wrap .ppap-form input[type="password"],
.ppap-wrap .ppap-form .input-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--ppap-text) !important;
  background: var(--ppap-bg-soft) !important;
  background-color: var(--ppap-bg-soft) !important;
  border: 1px solid var(--ppap-border) !important;
  border-radius: var(--ppap-radius-sm) !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.ppap-wrap input.ppap-input::placeholder,
.ppap-wrap .ppap-form input::placeholder {
  color: var(--ppap-text-faint) !important;
  opacity: 1 !important;
}
.ppap-wrap input.ppap-input:hover,
.ppap-wrap .ppap-form input:hover {
  border-color: var(--ppap-border-strong) !important;
}
.ppap-wrap input.ppap-input:focus,
.ppap-wrap .ppap-form input:focus {
  border-color: var(--ppap-purple) !important;
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.15) !important;
  outline: none !important;
}

/* ============================================================
 * 11. PASSWORD SHOW/HIDE (WC inyecta esto vía JS)
 * ============================================================ */
.ppap-wrap .password-input,
.ppap-wrap span.password-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ppap-wrap .password-input input {
  padding-right: 44px !important;
}
.ppap-wrap .show-password-input {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  color: var(--ppap-text-faint) !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.ppap-wrap .show-password-input:hover {
  color: var(--ppap-purple) !important;
}
.ppap-wrap .show-password-input::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 12px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%239e958a' stroke-width='2'><path d='M1 8s4-7 11-7 11 7 11 7-4 7-11 7S1 8 1 8z'/><circle cx='12' cy='8' r='3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.ppap-wrap .show-password-input.display-password::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%237c5cfc' stroke-width='2'><path d='M1 8s4-7 11-7 11 7 11 7-4 7-11 7S1 8 1 8z'/><circle cx='12' cy='8' r='3'/><line x1='2' y1='2' x2='22' y2='14'/></svg>") !important;
}

/* ============================================================
 * 12. OPTIONS ROW (recordarme + ¿olvidaste?)
 * Esto es lo que se rompía en v1.0.0 — estructura simplificada.
 * ============================================================ */
.ppap-wrap .ppap-options {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: -2px 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  /* defensa: si algo del theme aplica column-count, lo anulamos */
  column-count: auto !important;
  column-width: auto !important;
}
.ppap-wrap .ppap-remember {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  color: var(--ppap-text-muted) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
.ppap-wrap .ppap-remember .ppap-remember-txt {
  display: inline-block !important;
  white-space: nowrap !important;
}
.ppap-wrap .ppap-check {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--ppap-purple) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}
.ppap-wrap .ppap-forgot {
  font-size: 13px !important;
  color: var(--ppap-purple) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}
.ppap-wrap .ppap-forgot:hover { text-decoration: underline !important; }

/* ============================================================
 * 13. PRIVACY NOTE
 * ============================================================ */
.ppap-wrap .ppap-privacy {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--ppap-text-faint) !important;
  margin: 4px 0 18px !important;
  padding: 0 !important;
  width: 100% !important;
}
.ppap-wrap .ppap-privacy a {
  color: var(--ppap-purple) !important;
  text-decoration: none !important;
}
.ppap-wrap .ppap-privacy a:hover { text-decoration: underline !important; }

/* ============================================================
 * 14. SUBMIT BUTTON
 * ============================================================ */
.ppap-wrap .ppap-submit-row {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.ppap-wrap button.ppap-btn,
.ppap-wrap .ppap-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 13px 18px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: 999px !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: transform .15s, box-shadow .2s, filter .2s;
  text-decoration: none !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  height: auto !important;
  min-height: 0 !important;
}
.ppap-wrap .ppap-btn-primary {
  background: linear-gradient(135deg, var(--ppap-purple), var(--ppap-cyan)) !important;
  background-color: var(--ppap-purple) !important;
  color: #fff !important;
  box-shadow: var(--ppap-shadow-btn) !important;
}
.ppap-wrap .ppap-btn-primary:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(124, 92, 252, 0.30) !important;
}
.ppap-wrap .ppap-btn-primary:active { transform: translateY(0); }

/* ============================================================
 * 15. SWITCH LINK ("¿ya tienes cuenta?")
 * ============================================================ */
.ppap-wrap .ppap-switch {
  text-align: center !important;
  font-size: 13px !important;
  color: var(--ppap-text-muted) !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.ppap-wrap .ppap-switch a {
  color: var(--ppap-purple) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-left: 4px !important;
}
.ppap-wrap .ppap-switch a:hover { text-decoration: underline !important; }

/* ============================================================
 * 16. RESPONSIVE
 * ============================================================ */
@media (max-width: 820px) {
  .ppap-wrap { margin: 16px auto !important; }
  .ppap-wrap .ppap-card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }
  .ppap-wrap .ppap-hero {
    padding: 28px 24px 20px !important;
  }
  .ppap-wrap .ppap-hero-title { font-size: 22px !important; }
  .ppap-wrap .ppap-hero-bullets { display: none !important; }
  .ppap-wrap .ppap-illus { display: none !important; }
  .ppap-wrap .ppap-pane { padding: 24px 24px 28px !important; }
}

@media (max-width: 480px) {
  .ppap-wrap { padding: 0 12px !important; }
  .ppap-wrap .ppap-hero { padding: 24px 20px 16px !important; }
  .ppap-wrap .ppap-pane { padding: 20px 20px 24px !important; }
  .ppap-wrap .ppap-hero-title { font-size: 20px !important; }
  .ppap-wrap .ppap-hero-sub { font-size: 14px !important; }
  .ppap-wrap .ppap-tab { font-size: 13px !important; padding: 8px 10px !important; }
  .ppap-wrap .ppap-btn { font-size: 14px !important; padding: 12px 16px !important; }
  /* En móvil estrecho, apilar el row de options para que nada se corte */
  .ppap-wrap .ppap-options {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* ============================================================
 * 17. OCULTAR ELEMENTOS QUE WC O EL THEME INYECTAN ALREDEDOR
 * Algunos themes envuelven el form en columnas .u-columns con h2 "Login"
 * y "Register" que no queremos (ya tenemos nuestros propios tabs/títulos).
 * ============================================================ */
.woocommerce-account .woocommerce > .u-columns > h2,
.woocommerce-account .woocommerce-MyAccount-navigation { /* navigation aparece logueado */ }

.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account:not(.logged-in) .woocommerce > h1 {
  display: none !important;
}