/* ════════════════════════════════════════════════════════════════
   PSYPACKS — MY ACCOUNT
   Estilos de /mi-cuenta/ y sub-endpoints (pedidos, direcciones,
   datos, psypoints, ver pedido).

   Sistema único: prefijo .psy-acct-*
   Se encola condicionalmente en is_account_page() — ver functions.php.

   Fuentes:
     - Nunito: UI general (sidebar, botones, tablas, badges)
     - Rajdhani: labels de formulario (alineado con design system)
     - Imprima: inputs (alineado con design system)
     - Bebas Neue: números grandes (saldo PsyPoints, totales)
════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. ELEMENTOR / WOOCOMMERCE RESET — full-bleed + no gap
   Neutraliza los wrappers de Elementor y WooCommerce que meten
   padding/max-width a la página de Mi Cuenta. Sin este bloque
   Mi Cuenta queda encajada en una columna estrecha con hueco
   superior.
════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce,
.woocommerce-page .woocommerce {
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Elementor (layout old + flex containers new) — ancho total y overflow visible */
.woocommerce-account .elementor-section > .elementor-container,
.woocommerce-account .elementor-section.elementor-section-boxed > .elementor-container,
.woocommerce-account .e-con-inner,
.woocommerce-account .e-con > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.woocommerce-account .elementor-column,
.woocommerce-account [class*="elementor-col-"] {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
}
.woocommerce-account .elementor-column-wrap,
.woocommerce-account .elementor-widget-wrap,
.woocommerce-account .elementor-widget-container,
.woocommerce-account .elementor-widget-shortcode > .elementor-widget-container {
  padding: 0 !important;
  width: 100% !important;
}
.woocommerce-account .elementor-section,
.woocommerce-account .elementor-container,
.woocommerce-account .elementor-inner,
.woocommerce-account .elementor-column,
.woocommerce-account .elementor-column-wrap,
.woocommerce-account .elementor-widget-wrap,
.woocommerce-account .elementor-widget,
.woocommerce-account .elementor-widget-container,
.woocommerce-account #psy-main,
.woocommerce-account main {
  overflow: visible !important;
}
body.woocommerce-account .e-con {
  --container-max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Gap superior: zero-ea padding/margin de los wrappers entre
   el header y el contenido. Antes se hacía vía JS hack en
   my-account.php — ahora es CSS limpio. */
body.woocommerce-account #psy-main,
body.woocommerce-account #psy-main > .elementor,
body.woocommerce-account #psy-main > .elementor > .elementor-section-wrap,
body.woocommerce-account .elementor-section-wrap,
body.woocommerce-account #psy-main .elementor-section,
body.woocommerce-account #psy-main .elementor-top-section,
body.woocommerce-account #psy-main .e-con,
body.woocommerce-account #psy-main .e-con-inner,
body.woocommerce-account #psy-main .elementor-element {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  min-height: 0 !important;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
}
/* Elimina cualquier hueco heredado entre el wrap y el footer */
body.woocommerce-account .psy-acct-wrap { margin: 0 !important; }
body.woocommerce-account footer,
body.woocommerce-account .site-footer,
body.woocommerce-account #psy-footer { margin-top: 0 !important; }

/* Neutralizar padding/margin que WooCommerce inyecta en el wrapper del tab */
.psy-acct-main .woocommerce-MyAccount-content {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Ocultar el notices wrapper vacío para que no genere espacio */
.psy-acct-main .woocommerce-notices-wrapper:empty {
  display: none !important;
}

/* Fuerza que #psy-main llene el viewport y que el wrap crezca con él.
   Así la sidebar llega hasta abajo (pill pegado al footer) y no hay
   hueco blanco entre el wrap y el newsletter. */
body.woocommerce-account #psy-main {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: #FDFDFD;
}
body.woocommerce-account #psy-main > *,
body.woocommerce-account #psy-main .elementor,
body.woocommerce-account #psy-main .elementor-section-wrap,
body.woocommerce-account #psy-main .elementor-section,
body.woocommerce-account #psy-main .elementor-container,
body.woocommerce-account #psy-main .elementor-column,
body.woocommerce-account #psy-main .elementor-column-wrap,
body.woocommerce-account #psy-main .elementor-widget-wrap,
body.woocommerce-account #psy-main .elementor-widget,
body.woocommerce-account #psy-main .elementor-widget-container,
body.woocommerce-account #psy-main .elementor-widget-shortcode,
body.woocommerce-account #psy-main .e-con,
body.woocommerce-account #psy-main .e-con-inner,
body.woocommerce-account #psy-main .woocommerce {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  background: inherit;
}
/* El wrap toma su propio display:flex para sidebar+main */
body.woocommerce-account .psy-acct-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  height: auto !important;
  background: #FDFDFD !important;
}
body.woocommerce-account .psy-acct-sidebar {
  align-self: flex-start !important;
  height: auto !important;
  max-height: calc(100vh - 72px) !important;
  flex: 0 0 268px !important;
}
/* Neutralizar width:68% + float:right que WooCommerce aplica al tab */
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
/* Selectores de ID dinámico de Elementor: aplanar min-height generado en el editor */
body.woocommerce-account [class*="elementor-element"] > .elementor-container,
body.woocommerce-account [class*="elementor-element"] > .elementor-widget-container {
  min-height: 0 !important;
  height: auto !important;
}


/* ════════════════════════════════════════════════════════════════
   2. LAYOUT — wrapper + sidebar + main
════════════════════════════════════════════════════════════════ */

.psy-acct-wrap {
  display: flex;
  width: 100%;
  position: relative;
  align-items: stretch;
  min-height: 0;
  background: #FDFDFD;
}

.psy-acct-sidebar {
  width: 268px;
  flex-shrink: 0;
  background: #FAFAFA;
  border-right: 1px solid #EBEBEB;
  display: flex;
  flex-direction: column;
  /* sticky: el nav sigue al scroll pero la columna ocupa toda la altura del wrap */
  position: sticky;
  top: 72px;
  align-self: flex-start;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  /* Pseudo-extensión de fondo: el ::after pinta el fondo gris hacia abajo
     cuando el sidebar sticky es más corto que el main content */
}
/* Columna izquierda siempre gris hasta el fondo del wrap */
.psy-acct-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 268px;
  bottom: 0;
  background: #FAFAFA;
  border-right: 1px solid #EBEBEB;
  pointer-events: none;
  z-index: 0;
}
.psy-acct-sidebar { position: sticky; z-index: 1; }

.psy-acct-main {
  flex: 1;
  min-width: 0;
  padding: 32px 44px 52px;
  background: #FDFDFD;
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  animation: psy-acct-fadein 0.18s ease-out both;
}
@keyframes psy-acct-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   3. SIDEBAR — user block + nav + points pill
════════════════════════════════════════════════════════════════ */

.psy-acct-user {
  padding: 20px 18px 16px;
  border-bottom: 1px solid #EBEBEB;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  box-sizing: border-box;
}
.psy-acct-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.psy-acct-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.psy-acct-initials {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 1;
}
.psy-acct-user-info { min-width: 0; }
.psy-acct-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #1A1A1A;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psy-acct-email {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #666;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.psy-acct-nav {
  padding: 20px 12px 10px;
}
.psy-acct-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: #555;
  text-decoration: none;
  border-radius: 8px;
  background: transparent;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
}
.psy-acct-nav-item:hover {
  background: rgba(26, 26, 26, 0.05);
  color: #1A1A1A;
  text-decoration: none;
}
.psy-acct-nav-item.is-active {
  background: #1A1A1A;
  color: #fff;
  font-weight: 700;
}
.psy-acct-nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.55;
  stroke: currentColor;
  fill: none;
}
.psy-acct-nav-item:hover svg { opacity: 0.85; }
.psy-acct-nav-item.is-active svg { opacity: 1; }

.psy-acct-nav-item.is-logout { color: #DC2626; }
.psy-acct-nav-item.is-logout:hover { background: rgba(220, 38, 38, 0.08); color: #DC2626; }
.psy-acct-nav-item.is-logout svg { opacity: 0.65; }
.psy-acct-nav-item.is-logout:hover svg { opacity: 1; }

.psy-acct-nav-sep {
  height: 1px;
  background: #EBEBEB;
  margin: 6px 14px;
}

a.psy-acct-points-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #E4E4E4;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s;
}
a.psy-acct-points-pill:hover {
  border-color: #1A1A1A;
  text-decoration: none;
}
.psy-acct-points-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
  line-height: 1;
  white-space: nowrap;
}
.psy-acct-points-val {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1A1A1A;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.psy-acct-points-unit {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
}


/* ════════════════════════════════════════════════════════════════
   4. MOBILE NAV — dropdown que reemplaza al sidebar vertical
   Solo visible en ≤860px.
════════════════════════════════════════════════════════════════ */

.psy-acct-mob-nav { display: none; }

/* ── Dropdown del nav móvil (estilos base, independientes del breakpoint) ── */
@media (max-width: 860px) {
  .psy-acct-mob-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid #DEDEDE;
    border-radius: 9px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #1A1A1A;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    transition: border-color 0.15s;
  }
  .psy-acct-mob-btn:hover,
  .psy-acct-mob-btn[aria-expanded="true"] { border-color: #1A1A1A; }
  .psy-acct-mob-btn-left {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .psy-acct-mob-btn-left svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    opacity: 0.7;
  }
  .psy-acct-mob-btn-chev {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    stroke: #999;
    fill: none;
    transition: transform 0.22s;
  }
  .psy-acct-mob-btn[aria-expanded="true"] .psy-acct-mob-btn-chev { transform: rotate(180deg); }

  .psy-acct-mob-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 16px;
    right: 16px;
    background: #fff;
    border: 1.5px solid #DEDEDE;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    overflow: hidden;
  }
  .psy-acct-mob-dropdown.is-open { display: block; }
  .psy-acct-mob-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #F2F2F2;
    border-left: 3px solid transparent;
    transition: background 0.1s, color 0.1s;
    background: #fff;
  }
  .psy-acct-mob-item:last-child { border-bottom: none; }
  .psy-acct-mob-item:hover { background: #F4F4F4; color: #1A1A1A; text-decoration: none; }
  .psy-acct-mob-item.is-active {
    background: #F2F2F2;
    color: #1A1A1A;
    border-left-color: #1A1A1A;
  }
  .psy-acct-mob-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.4;
    stroke: currentColor;
    fill: none;
  }
  .psy-acct-mob-item:hover svg,
  .psy-acct-mob-item.is-active svg { opacity: 0.85; }
  .psy-acct-mob-item.is-logout { color: #DC2626; }
  .psy-acct-mob-item.is-logout:hover { background: #FEF2F2; color: #DC2626; }
}


/* ════════════════════════════════════════════════════════════════
   5. MAIN CONTENT — page header + labels + notices
════════════════════════════════════════════════════════════════ */

.psy-acct-page-head { margin-bottom: 26px; min-height: 66px; }
.psy-acct-page-title {
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #1A1A1A;
  line-height: 1.3;
  margin: 0 0 3px;
  padding: 0;
}
.psy-acct-page-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}
.psy-acct-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #666;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.15s;
}
.psy-acct-back-link:hover { color: #1A1A1A; text-decoration: none; }

.psy-acct-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 14px;
}
.psy-acct-section-title {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
}

/* WooCommerce notices (success / error / info) */
.psy-acct-main .woocommerce-message,
.psy-acct-main .woocommerce-error,
.psy-acct-main .woocommerce-info {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 10px;
  border-top: none;
  border-left: 4px solid;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}
.psy-acct-main .woocommerce-message::before,
.psy-acct-main .woocommerce-error::before,
.psy-acct-main .woocommerce-info::before { display: none; }
.psy-acct-main .woocommerce-message { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.psy-acct-main .woocommerce-error   { border-color: #C44FAB; background: #FFF5FD; color: #C44FAB; }
.psy-acct-main .woocommerce-info    { border-color: #1a6b9a; background: #eff8ff; color: #1a6b9a; }
.psy-acct-main .woocommerce-message a,
.psy-acct-main .woocommerce-error a,
.psy-acct-main .woocommerce-info a { color: inherit; font-weight: 700; }
.psy-acct-main .woocommerce-notices-wrapper {
  min-height: 0;
  padding: 0;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   6. LAST ORDER BANNER (.psy-acct-lob)
════════════════════════════════════════════════════════════════ */

.psy-acct-lob {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding: 18px 22px;
  background: #fff;
  border: 1.5px solid #EDEDED;
  border-radius: 14px;
  transition: border-color 0.2s;
}
.psy-acct-lob:hover { border-color: #D8D8D8; }
.psy-acct-lob-left  { display: flex; align-items: center; gap: 16px; min-width: 0; }
.psy-acct-lob-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.psy-acct-lob-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.psy-acct-lob-icon svg { width: 18px; height: 18px; stroke: #1A1A1A; fill: none; }
.psy-acct-lob-meta {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 3px;
}
.psy-acct-lob-num {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}
.psy-acct-lob-num span { font-weight: 500; color: #666; margin-left: 8px; }


/* ════════════════════════════════════════════════════════════════
   7. TABLE (.psy-acct-tbl)
════════════════════════════════════════════════════════════════ */

.psy-acct-tbl {
  width: 100%;
  border-collapse: collapse;
}
.psy-acct-tbl th {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  text-align: left;
  padding: 0 12px 14px 0;
  border-bottom: 1px solid #EDEDED;
}
.psy-acct-tbl th:first-child { padding-left: 0; }
.psy-acct-tbl th:last-child  { text-align: right; padding-right: 0; }
.psy-acct-tbl td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid #EDEDED;
  vertical-align: middle;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
}
.psy-acct-tbl td:first-child { padding-left: 0; }
.psy-acct-tbl td:last-child  { text-align: right; padding-right: 0; }
.psy-acct-tbl tr:last-child td { border-bottom: none; }
.psy-acct-tbl tbody tr { transition: background 0.1s; }
.psy-acct-tbl tbody tr:hover td { background: #FAFAFA; }
.psy-acct-tbl-action {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.15s;
}
.psy-acct-tbl-action:hover { color: #1A1A1A; text-decoration: none; }

.psy-acct-tbl-order-id {
  font-weight: 700;
  font-size: 14px;
  color: #1A1A1A;
}
.psy-acct-tbl-date {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}
.psy-acct-tbl-amount {
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #1A1A1A;
}
.psy-acct-tbl-amount .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}


/* ════════════════════════════════════════════════════════════════
   8. BADGES (estado de pedido) (.psy-acct-badge)
════════════════════════════════════════════════════════════════ */

.psy-acct-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.psy-acct-badge-done      { background: #f0fdf4; color: #16a34a; border: 1px solid #c6e8cf; }
.psy-acct-badge-shipped   { background: #eff8ff; color: #1a6b9a; border: 1px solid #bde0f7; }
.psy-acct-badge-process   { background: #FFF5FD; color: #C44FAB; border: 1px solid #f5c6ea; }
.psy-acct-badge-pending   { background: #F5F5F5; color: #666;    border: 1px solid #EDEDED; }
.psy-acct-badge-cancelled { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }


/* ════════════════════════════════════════════════════════════════
   9. BUTTONS (.psy-acct-btn)
════════════════════════════════════════════════════════════════ */

.psy-acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #fff;
  background: #1A1A1A;
  border: 1.5px solid #1A1A1A;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.psy-acct-btn:hover {
  background: #333;
  border-color: #333;
  color: #fff;
  text-decoration: none;
}
.psy-acct-btn-sm {
  padding: 6px 14px;
  font-size: 11px;
  border-radius: 7px;
}
.psy-acct-btn-ghost {
  background: transparent;
  color: #1A1A1A;
}
.psy-acct-btn-ghost:hover {
  background: #1A1A1A;
  color: #fff;
}
/* CTA rosa — SOLO para "Ir a la Tienda PsyPoints" y similares */
.psy-acct-btn-pink {
  background: #FFB2EF;
  color: #1A1A1A;
  border-color: #FFB2EF;
}
.psy-acct-btn-pink:hover {
  background: #ff9ae8;
  border-color: #ff9ae8;
  color: #1A1A1A;
}


/* ════════════════════════════════════════════════════════════════
   10. EMPTY STATE (.psy-acct-empty)
════════════════════════════════════════════════════════════════ */

.psy-acct-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px dashed #EDEDED;
  border-radius: 14px;
  margin-top: 16px;
  padding: 40px 20px;
}
.psy-acct-empty-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  background: #F2F2F2;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.psy-acct-empty-icon svg { width: 24px; height: 24px; stroke: #999; stroke-width: 1.6; fill: none; }
.psy-acct-empty-title {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 6px;
}
.psy-acct-empty-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-bottom: 20px;
}


/* ════════════════════════════════════════════════════════════════
   11. VIEW-ALL LINK (.psy-acct-view-all)
════════════════════════════════════════════════════════════════ */

.psy-acct-view-all { margin-top: 20px; }
.psy-acct-view-all a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  text-decoration: none;
  transition: color 0.15s;
}
.psy-acct-view-all a:hover { color: #1A1A1A; text-decoration: none; }
.psy-acct-view-all a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }


/* ════════════════════════════════════════════════════════════════
   12. PAGINATION (.psy-acct-pager)
════════════════════════════════════════════════════════════════ */

.psy-acct-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EDEDED;
}
.psy-acct-pager-info {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #666;
}
.psy-acct-pager-actions {
  display: flex;
  gap: 8px;
}


/* ════════════════════════════════════════════════════════════════
   13. ADDRESSES (.psy-acct-addr-*)
════════════════════════════════════════════════════════════════ */

.psy-acct-addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.psy-acct-addr-card {
  padding: 22px;
  background: #fff;
  border: 1.5px solid #EDEDED;
  border-radius: 14px;
  transition: border-color 0.2s;
}
.psy-acct-addr-card:hover { border-color: #D8D8D8; }
.psy-acct-addr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.psy-acct-addr-title {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A1A1A;
}
.psy-acct-addr-body,
.psy-acct-addr-body address {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  line-height: 1.85;
  font-style: normal;
}
.psy-acct-addr-body strong { color: #1A1A1A; font-weight: 700; }
.psy-acct-addr-empty { color: #999; font-style: italic; }


/* ════════════════════════════════════════════════════════════════
   14. FORMS — alineados con el design system oficial
   Label: Rajdhani 12px 700 uppercase .04em
   Input: Imprima 14px, border 1px #DDD, radius 5px, focus #aaa
   Placeholder: #bbb
════════════════════════════════════════════════════════════════ */

.psy-acct-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-top: 0;
}
.psy-acct-form > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Par de campos lado a lado (Nombre+Apellido, etc.) */
.psy-acct-row-half {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  flex-wrap: nowrap;
}
.psy-acct-row-half > .psy-acct-fg {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
}

/* Campo individual */
.psy-acct-fg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.psy-acct-form-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A1A1A;
  line-height: 1.2;
  margin: 0;
}
.psy-acct-form-label .required { color: #C44FAB; margin-left: 2px; }

.psy-acct-form-input {
  padding: 9px 13px;
  border: 1.5px solid #DDDDDD;
  border-radius: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  background: #fff;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  height: 38px;
  line-height: 1.4;
  scroll-margin-top: 120px;
  scroll-margin-bottom: 40px;
}
textarea.psy-acct-form-input { height: auto; min-height: 90px; }
.psy-acct-form-input:focus,
.psy-acct-form input:focus,
.psy-acct-form select:focus,
.psy-acct-form textarea:focus,
body.woocommerce-account .psy-acct-form-input:focus,
body.woocommerce-account .psy-acct-form input:focus,
body.woocommerce-account .psy-acct-form select:focus {
  border-color: #1A1A1A !important;
  box-shadow: none !important;
  outline: none !important;
}
.psy-acct-form-input::placeholder { color: #bbb; font-weight: 400; }
.psy-acct-form-input:disabled {
  background: #F4F4F4;
  color: #bbb;
  cursor: not-allowed;
}

/* Select con chevron custom */
select.psy-acct-form-input {
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.psy-acct-form-sep {
  height: 1px;
  background: #F0F0F0;
  width: 100%;
  margin: 4px 0;
}
.psy-acct-form-actions {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  width: 100%;
}

/* Bloque de título interior dentro de form (ej: "Cambiar contraseña") */
.psy-acct-form-section {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   14b. WOOCOMMERCE FORM HOOKS — neutralizar estilos inyectados
   por WC en .psy-acct-form (woocommerce_edit_account_form,
   password-strength, show-password-input, etc.)
════════════════════════════════════════════════════════════════ */

.psy-acct-form .woocommerce-form-row,
.psy-acct-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.psy-acct-form .woocommerce-form-row--wide,
.psy-acct-form .form-row-wide { grid-column: 1 / -1; }

.psy-acct-form .woocommerce-form-row label,
.psy-acct-form .form-row label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A1A1A;
  margin: 0;
}

.psy-acct-form .woocommerce-Input,
.psy-acct-form .input-text {
  padding: 9px 13px;
  border: 1px solid #DDDDDD;
  border-radius: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  background: #fff;
  outline: none;
  width: 100%;
  box-shadow: none;
  height: auto;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.psy-acct-form .woocommerce-Input:focus,
.psy-acct-form .input-text:focus {
  border-color: #1A1A1A;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06);
}
.psy-acct-form .woocommerce-Input:disabled,
.psy-acct-form .input-text:disabled {
  background: #F4F4F4;
  color: #bbb;
  cursor: not-allowed;
}

/* Password: WC envuelve el input en <span class="password-input"> y añade botón "ojo" */
.psy-acct-form span.password-input {
  display: block;
  width: 100%;
  position: relative;
}
.psy-acct-form .show-password-input,
.psy-acct-form span.show-password-input,
.psy-acct-form .woocommerce-password-strength,
.psy-acct-form .woocommerce-password-hint { display: none; }


/* ════════════════════════════════════════════════════════════════
   15. PSYPOINTS — Hero + Tier card + Historial
════════════════════════════════════════════════════════════════ */

.psy-acct-pts-card {
  padding: 22px 24px;
  margin-bottom: 16px;
  background: #fff;
  border: 1.5px solid #EDEDED;
  border-radius: 14px;
  transition: border-color 0.2s;
  overflow: visible;
}
.psy-acct-pts-card:hover { border-color: #D8D8D8; }

/* Hero con un matiz ligero de marca para destacar */
.psy-acct-pts-hero-card {
  background: linear-gradient(180deg, #FFFCFE 0%, #FFFFFF 100%);
  border-color: #F3DDEC;
}
.psy-acct-pts-hero-card:hover { border-color: #EBC4DC; }

.psy-acct-pts-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 4px;
}

/* ── Hero: saldo + CTA Store ── */
.psy-acct-pts-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.psy-acct-pts-hero .psy-acct-btn,
.psy-acct-btn-hero {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex !important;
  gap: 8px;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
}
.psy-acct-pts-balance-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  letter-spacing: 0.04em;
  color: #1A1A1A;
  line-height: 1;
}
.psy-acct-pts-balance-num em {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  color: #666;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.psy-acct-pts-hero-left { display: flex; flex-direction: column; }
.psy-acct-pts-balance-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  margin-top: 6px;
}
.psy-acct-pts-balance-sub strong { color: #1A1A1A; font-weight: 700; }

/* ── Stats row: 3 mini-tarjetas ── */
.psy-acct-pts-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.psy-acct-pts-stat {
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid #EDEDED;
  border-radius: 12px;
  transition: border-color 0.2s;
}
.psy-acct-pts-stat:hover { border-color: #D8D8D8; }
.psy-acct-pts-stat-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 6px;
}
.psy-acct-pts-stat-val {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1A1A1A;
  line-height: 1.1;
}
.psy-acct-pts-stat-val em {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 600;
  font-style: normal;
  color: #666;
  margin-left: 2px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Tips: cómo ganar más ── */
.psy-acct-pts-tips {
  padding: 22px 24px;
  margin-bottom: 16px;
  background: #fff;
  border: 1.5px solid #EDEDED;
  border-radius: 14px;
}
.psy-acct-pts-tips-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #1A1A1A;
  margin-bottom: 16px;
}
.psy-acct-pts-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.psy-acct-pts-tip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.psy-acct-pts-tip-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #F7F7F7;
  color: #1A1A1A;
  margin-bottom: 6px;
}
.psy-acct-pts-tip-icon svg { width: 16px; height: 16px; }
.psy-acct-pts-tip-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #1A1A1A;
}
.psy-acct-pts-tip-text {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #666;
  line-height: 1.45;
}

/* ── Tier actual: head + scale horizontal + progreso ── */
.psy-acct-pts-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.psy-acct-pts-tier-name {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1A1A1A;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.psy-acct-pts-tier-name .mult {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: #C44FAB;
  letter-spacing: 0.04em;
}
.psy-acct-pts-tier-season {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-align: right;
}
.psy-acct-pts-tier-season strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #1A1A1A;
  margin-left: 2px;
}

/* Scale horizontal — 5 steps con dots conectados */
.psy-acct-pts-scale {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  position: relative;
  padding-top: 6px;
  overflow: visible;
}
.psy-acct-pts-scale-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 0 4px;
  overflow: visible;
}
/* Línea conectora entre steps */
.psy-acct-pts-scale-step::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #EDEDED;
  z-index: 0;
}
.psy-acct-pts-scale-step:last-child::before { display: none; }
.psy-acct-pts-scale-step.is-done::before {
  background: #1A1A1A;
}
.psy-acct-pts-scale-step .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #EDEDED;
  border: 2px solid #EDEDED;
  position: relative;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}
.psy-acct-pts-scale-step.is-done .dot { background: #1A1A1A; border-color: #1A1A1A; }
.psy-acct-pts-scale-step.is-current .dot {
  background: #FFB2EF;
  border-color: #1A1A1A;
  width: 20px;
  height: 20px;
  margin-top: -2px;
}
.psy-acct-pts-scale-name {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.3;
}
.psy-acct-pts-scale-step.is-done   .psy-acct-pts-scale-name,
.psy-acct-pts-scale-step.is-current .psy-acct-pts-scale-name { color: #1A1A1A; }
.psy-acct-pts-scale-mult {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #bbb;
  letter-spacing: 0.02em;
}
.psy-acct-pts-scale-step.is-current .psy-acct-pts-scale-mult { color: #C44FAB; font-weight: 700; }

/* Barra de progreso al siguiente tier */
.psy-acct-pts-progress {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #F0F0F0;
}
.psy-acct-pts-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  flex-wrap: wrap;
}
.psy-acct-pts-progress-head strong { color: #1A1A1A; font-weight: 700; }
.psy-acct-pts-progress-bar {
  height: 6px;
  background: #EDEDED;
  border-radius: 99px;
  overflow: hidden;
}
.psy-acct-pts-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFB2EF, #ff9ae8);
  border-radius: 99px;
  transition: width 0.6s ease;
}

/* Tier máximo */
.psy-acct-pts-max {
  padding: 14px 18px;
  background: #FFF5FD;
  border: 1.5px solid #f5c6ea;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #C44FAB;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Historial agrupado por mes */
.psy-acct-pts-month { margin-bottom: 8px; }
.psy-acct-pts-month-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  padding: 14px 0 10px;
  border-bottom: 1px solid #EDEDED;
}
.psy-acct-pts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #EDEDED;
  gap: 12px;
}
.psy-acct-pts-row:last-child { border-bottom: none; }
.psy-acct-pts-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.psy-acct-pts-sign {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.psy-acct-pts-sign.is-plus  { background: #f0fdf4; color: #16a34a; }
.psy-acct-pts-sign.is-minus { background: #FFF5FD; color: #C44FAB; }
.psy-acct-pts-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
}
.psy-acct-pts-date {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #666;
  margin-top: 2px;
}
.psy-acct-pts-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.psy-acct-pts-amount.is-plus  { color: #16a34a; }
.psy-acct-pts-amount.is-minus { color: #C44FAB; }


/* ════════════════════════════════════════════════════════════════
   16. RESPONSIVE
════════════════════════════════════════════════════════════════ */

/* Wrapper outer de tablas — scroll horizontal en tablet/móvil */
.psy-acct-tbl-outer { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 860px) {
  /* ── Layout wrap ────────────────────────────────────────── */
  .psy-acct-wrap { min-height: 0; background: #FDFDFD; }
  .psy-acct-wrap::before { display: none; }

  /* ── Sidebar compacto: user + pill + dropdown en 1 barra ── */
  .psy-acct-sidebar {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #EBEBEB;
    background: #FAFAFA;
    border-right: none;
    overflow: visible !important;
    z-index: 100;
  }
  .psy-acct-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: none;
  }
  /* Avatar más pequeño en móvil */
  .psy-acct-user .psy-acct-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
  .psy-acct-user .psy-acct-initials { font-size: 13px; }
  .psy-acct-user .psy-acct-user-row { flex: 1; min-width: 0; }
  .psy-acct-user .psy-acct-name { font-size: 13px; margin-bottom: 1px; }
  .psy-acct-user .psy-acct-email { font-size: 11px; }
  /* Pill en la misma fila del user (a la derecha) */
  .psy-acct-user .psy-acct-points-pill {
    padding: 6px 12px;
    border-radius: 8px;
    gap: 6px;
    flex-shrink: 0;
  }
  .psy-acct-user .psy-acct-points-label { font-size: 9px; }
  .psy-acct-user .psy-acct-points-val { font-size: 14px; }
  .psy-acct-user .psy-acct-points-unit { font-size: 9px; }

  /* Ocultar nav desktop, mostrar dropdown móvil */
  .psy-acct-nav,
  .psy-acct-sidebar-bottom { display: none; }
  .psy-acct-mob-nav {
    display: block;
    position: relative;
    padding: 6px 16px 8px;
    background: #FAFAFA;
  }

  /* ── Contenido principal ────────────────────────────────── */
  .psy-acct-main { padding: 16px 16px 48px; }
  .psy-acct-page-head { min-height: 0 !important; margin-bottom: 14px; }
  .psy-acct-page-title { font-size: 18px; }
  .psy-acct-empty { padding: 28px 16px; margin-top: 4px; }

  /* ── LOB (último pedido): compacto, badge + botón en misma fila ── */
  .psy-acct-lob {
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .psy-acct-lob-left { flex: 1; min-width: 0; gap: 10px; }
  .psy-acct-lob-icon { width: 34px; height: 34px; border-radius: 8px; }
  .psy-acct-lob-icon svg { width: 15px; height: 15px; }
  .psy-acct-lob-meta { font-size: 9px; }
  .psy-acct-lob-num { font-size: 13px; }
  .psy-acct-lob-num span { display: none; }
  .psy-acct-lob-right { gap: 8px; flex-shrink: 0; }

  /* ── Direcciones en 1 columna ───────────────────────────── */
  .psy-acct-addr-grid { grid-template-columns: 1fr; }

  /* ── PsyPoints ──────────────────────────────────────────── */
  .psy-acct-pts-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .psy-acct-pts-hero .psy-acct-btn { width: 100%; justify-content: center; }
  .psy-acct-pts-balance-num { font-size: 44px; }
  .psy-acct-pts-tier-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .psy-acct-pts-tier-season { text-align: left; }
  .psy-acct-pts-scale-mult { display: none; }
  .psy-acct-pts-scale-name { font-size: 9px; }
  .psy-acct-pts-stats { grid-template-columns: 1fr 1fr; }
  .psy-acct-pts-tips-grid { grid-template-columns: 1fr; gap: 14px; }

  /* ── Formularios ────────────────────────────────────────── */
  .psy-acct-row-half { flex-direction: column; gap: 14px; }
  .psy-acct-row-half > .psy-acct-fg { width: 100%; }
  .psy-acct-form { gap: 14px; }

  .psy-acct-pager { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 480px) {
  .psy-acct-main { padding: 12px 12px 40px; }
}

@media (max-width: 600px) {
  /* ── Tarjetas de pedido (2 cols, 2 filas)
     Fila 1: #4042               [VER]
     Fila 2: 66,07€        [EN ESPERA]
  ─────────────────────────────────────── */
  .psy-acct-orders-tbl thead { display: none; }
  .psy-acct-orders-tbl,
  .psy-acct-orders-tbl tbody { display: block; }
  .psy-acct-orders-tbl tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 10px;
    padding: 24px 0;
    border-bottom: 1px solid #EDEDED;
    background: none !important;
    align-items: center;
  }
  .psy-acct-orders-tbl tr:last-child { border-bottom: none; }
  .psy-acct-orders-tbl tbody tr:hover td { background: none; }
  .psy-acct-orders-tbl td {
    display: block;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
  }
  /* Fila 1: #pedido (col1) | badge (col2) | [VER] (col3) */
  .psy-acct-orders-tbl td:nth-child(1) { grid-row: 1; grid-column: 1; }
  .psy-acct-orders-tbl td:nth-child(4) { grid-row: 1; grid-column: 2; }
  .psy-acct-orders-tbl td:nth-child(5) { grid-row: 1; grid-column: 3; text-align: right !important; margin-left: 10px; }
  /* VER tabla → ghost, secundario */
  .psy-acct-orders-tbl td:nth-child(5) .psy-acct-btn {
    background: transparent !important;
    color: #1A1A1A !important;
    border-color: #1A1A1A !important;
  }
  .psy-acct-orders-tbl td:nth-child(5) .psy-acct-btn:hover {
    background: #1A1A1A !important;
    color: #fff !important;
  }
  /* Fila 2: fecha (col1-2) | precio (col3, dcha) */
  .psy-acct-orders-tbl td:nth-child(2) { grid-row: 2; grid-column: 1 / 3; }
  .psy-acct-orders-tbl td:nth-child(2) .psy-acct-tbl-date { font-size: 12px; color: #999; }
  .psy-acct-orders-tbl td:nth-child(3) { grid-row: 2; grid-column: 3; text-align: right !important; }

  /* Totales del pedido: ancho completo */
  .psy-acct-order-totals-wrap { justify-content: flex-start !important; }
  .psy-acct-order-totals { max-width: 100% !important; }

  /* Empty state */
  .psy-acct-empty { padding: 20px 12px; }
  .psy-acct-empty-icon { width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  /* En móviles muy pequeños la scale puede quedar apretada — scroll horizontal */
  .psy-acct-pts-scale {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 4px;
  }
  .psy-acct-pts-scale-step {
    min-width: 70px;
    flex: 0 0 auto;
  }
}


/* ════════════════════════════════════════════════════════════════
   17. OVERRIDES FINALES — al final del archivo para ganar siempre
   por orden de cascada en empates de especificidad.
════════════════════════════════════════════════════════════════ */

/* Focus: borde negro sólido en cualquier campo del formulario.
   Aplicado con máxima especificidad y !important para ganarle
   a WooCommerce/Elementor/Astra. */
body.woocommerce-account .psy-acct-form .psy-acct-form-input:focus,
body.woocommerce-account .psy-acct-form input.psy-acct-form-input:focus,
body.woocommerce-account .psy-acct-form select.psy-acct-form-input:focus,
body.woocommerce-account .psy-acct-form textarea.psy-acct-form-input:focus,
body.woocommerce-account .psy-acct-main input[type="text"]:focus,
body.woocommerce-account .psy-acct-main input[type="email"]:focus,
body.woocommerce-account .psy-acct-main input[type="tel"]:focus,
body.woocommerce-account .psy-acct-main input[type="password"]:focus,
body.woocommerce-account .psy-acct-main select:focus,
body.woocommerce-account .psy-acct-main textarea:focus {
  border: 1.5px solid #1A1A1A !important;
  border-color: #1A1A1A !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ════════════════════════════════════════════════════════════════
   18. OVERRIDES FINALES — máxima especificidad con #psy-main.
   Corrigen comportamientos forzados por Elementor/WooCommerce.
════════════════════════════════════════════════════════════════ */

/* Sidebar: NUNCA se estira, siempre altura de contenido */
html body.woocommerce-account #psy-main .psy-acct-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: calc(100vh - 72px) !important;
  height: auto !important;
  background: #FDFDFD !important;
  position: relative !important;
}
html body.woocommerce-account #psy-main .psy-acct-sidebar {
  position: sticky !important;
  top: 72px !important;
  align-self: flex-start !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 72px) !important;
  z-index: 1 !important;
  background: #FAFAFA !important;
}
html body.woocommerce-account #psy-main .psy-acct-nav {
  flex: 0 0 auto !important;
}

/* En móvil/tablet anular los overrides de fila — volver a columna */
@media (max-width: 860px) {
  html body.woocommerce-account #psy-main .psy-acct-wrap,
  body.woocommerce-account .psy-acct-wrap {
    flex-direction: column !important;
    min-height: 0 !important;
  }
  html body.woocommerce-account #psy-main .psy-acct-sidebar,
  body.woocommerce-account .psy-acct-sidebar {
    position: relative !important;
    top: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    align-self: auto !important;
  }
}

/* Matar min-height/height/padding en todos los contenedores Elementor/WC */
html body.woocommerce-account #psy-main > *,
html body.woocommerce-account #psy-main > * > *,
html body.woocommerce-account #psy-main > * > * > *,
html body.woocommerce-account #psy-main > * > * > * > *,
html body.woocommerce-account #psy-main > * > * > * > * > *,
html body.woocommerce-account #psy-main [class*="elementor-"],
html body.woocommerce-account #psy-main [class*="e-con"],
html body.woocommerce-account #psy-main .woocommerce {
  min-height: 0 !important;
}
/* Excepción: el main sí necesita su padding-bottom */
html body.woocommerce-account #psy-main .psy-acct-main {
  padding-bottom: 48px !important;
}

/* Pill PsyPoints: compacto, label + valor en fila */
html body.woocommerce-account #psy-main a.psy-acct-points-pill {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Botón hero: texto + flecha siempre juntos */
html body.woocommerce-account #psy-main .psy-acct-btn-hero {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  flex-shrink: 0 !important;
}
/* Pill: val y unit en línea, nunca separados */
html body.woocommerce-account #psy-main .psy-acct-points-val {
  vertical-align: middle !important;
}
html body.woocommerce-account #psy-main .psy-acct-points-unit {
  vertical-align: middle !important;
  display: inline !important;
}
/* Sidebar: fondo suave */
html body.woocommerce-account #psy-main .psy-acct-sidebar {
  background: #FAFAFA !important;
}

/* ── HUECO BLANCO BAJO EL CONTENIDO ──────────────────────────
   Elementor genera padding vía CSS custom properties en el
   elemento section/container. Hay que anular TANTO el shorthand
   como las variables para que !important en padding funcione.   */
body.woocommerce-account #psy-main .elementor-section,
body.woocommerce-account #psy-main .elementor-section.elementor-top-section,
body.woocommerce-account #psy-main .e-con,
body.woocommerce-account #psy-main .e-con.e-parent {
  --padding-top: 0px !important;
  --padding-bottom: 0px !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --margin-top: 0px !important;
  --margin-bottom: 0px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
/* El section-wrap de Elementor también puede tener margin */
body.woocommerce-account #psy-main .elementor-section-wrap {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
/* El .elementor raíz */
body.woocommerce-account #psy-main > .elementor {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   19. ALTURA MÍNIMA — footer siempre fuera del viewport inicial.
   IMPORTANTE: #psy-main no existe en el DOM en las páginas de cuenta
   (Elementor usa su propio template). Por eso TODOS los selectores
   anteriores con #psy-main no coincidían. Este bloque apunta
   directamente a .psy-acct-wrap sin requerir #psy-main.

   Especificidad: html body.woocommerce-account .psy-acct-wrap = 0,0,2,2
   vs la regla conflictiva body.woocommerce-account .psy-acct-wrap = 0,0,2,1
   → esta gana.
════════════════════════════════════════════════════════════════ */
html body.woocommerce-account .psy-acct-wrap {
  min-height: calc(100vh - 72px) !important;
  align-items: stretch !important;
}