/* ======================================================================
   NEKON HUB · TESTER v26.69
   Compra VIP: separación visual + transición de tema por trazado de líneas.
   Sin cortina oscura, sin parpadeo, con sincronización visual preparada
   para cambios recibidos por Realtime en otra sesión/dispositivo.
   ====================================================================== */

/* Confirmación: el nombre del plan y la duración nunca quedan pegados. */
.vip-purchase-confirm__plan-copy{
  min-width:0;
  display:grid!important;
  grid-template-columns:1fr!important;
  align-content:center;
  gap:7px!important;
}
.vip-purchase-confirm__plan-copy strong{
  display:block!important;
  line-height:1.18!important;
  margin:0!important;
}
.vip-purchase-confirm__plan-copy span{
  display:block!important;
  line-height:1.35!important;
  margin:0!important;
  padding:0!important;
}

/* ----------------------------------------------------------------------
   TRANSICIÓN VIP 4s · "TRAZADO VIVO"
   - no cubre la pantalla de negro;
   - dibuja bordes desde el centro de cada contenedor;
   - el tema real cambia con interpolación lenta detrás de esos trazos;
   - mantiene la UI visible todo el tiempo.
   ---------------------------------------------------------------------- */
.vip-theme-line-transition{
  position:fixed;
  inset:0;
  z-index:100440;
  pointer-events:none;
  overflow:hidden;
  --morph-rgb:138,43,226;
}

.vip-theme-line-transition__ambient{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle at 50% 22%,rgba(var(--morph-rgb),.055),transparent 36rem),
    radial-gradient(circle at 18% 76%,rgba(var(--morph-rgb),.035),transparent 28rem);
  will-change:opacity;
}
.vip-theme-line-transition.is-running .vip-theme-line-transition__ambient{
  animation:nekonTierAmbient 4s ease-in-out both;
}

.vip-theme-line-transition__outline{
  position:fixed;
  display:block;
  box-sizing:border-box;
  opacity:0;
  background:
    linear-gradient(90deg,rgb(var(--morph-rgb)),rgb(var(--morph-rgb))) top center/0 1.5px no-repeat,
    linear-gradient(90deg,rgb(var(--morph-rgb)),rgb(var(--morph-rgb))) bottom center/0 1.5px no-repeat,
    linear-gradient(180deg,rgb(var(--morph-rgb)),rgb(var(--morph-rgb))) left center/1.5px 0 no-repeat,
    linear-gradient(180deg,rgb(var(--morph-rgb)),rgb(var(--morph-rgb))) right center/1.5px 0 no-repeat;
  filter:drop-shadow(0 0 5px rgba(var(--morph-rgb),.24));
  will-change:background-size,opacity,filter;
}
.vip-theme-line-transition.is-running .vip-theme-line-transition__outline{
  animation:nekonOutlinePaint 3.55s var(--outline-delay,0s) cubic-bezier(.45,0,.18,1) both;
}

/* Líneas finas de recorrido. No forman una cortina ni bloquean el contenido. */
.vip-theme-line-transition__sweep{
  position:absolute;
  left:50%;
  top:var(--sweep-y,50%);
  width:0;
  height:1px;
  transform:translateX(-50%);
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(var(--morph-rgb),.12),rgba(var(--morph-rgb),.58),rgba(var(--morph-rgb),.12),transparent);
  box-shadow:0 0 8px rgba(var(--morph-rgb),.16);
}
.vip-theme-line-transition.is-running .vip-theme-line-transition__sweep{
  animation:nekonSweepLine 2.9s var(--sweep-delay,0s) cubic-bezier(.45,0,.18,1) both;
}
.vip-theme-line-transition.is-leaving{
  opacity:0;
  transition:opacity .18s ease-out;
}

/* La paleta completa se interpola lentamente en vez de saltar. */
html.nekon-growth-tester-theme.vip-theme-morphing body,
html.nekon-growth-tester-theme.vip-theme-morphing header,
html.nekon-growth-tester-theme.vip-theme-morphing #menu,
html.nekon-growth-tester-theme.vip-theme-morphing .side-menu,
html.nekon-growth-tester-theme.vip-theme-morphing .mobile-menu,
html.nekon-growth-tester-theme.vip-theme-morphing .arena-bottom-nav,
html.nekon-growth-tester-theme.vip-theme-morphing .bottom-nav,
html.nekon-growth-tester-theme.vip-theme-morphing :is(
  .growth-hero,.growth-card,.growth-stat,.growth-lab-entry,
  .member-panel,.member-info-card,.member-data-item,.profile-card,.profile-stat,.profile-field,
  .wallet-panel,.wallet-balance-card,.wallet-request-card,.wallet-transaction-card,
  .premium-product-card,.streaming-account-card,.shared-account-card,
  .benefit-card,.methodology-card,.notification-center-shell,.notification-accordion-item,
  .notification-inline-detail,.vip-current,.vip-plan,.vip-journey-card,.vip-member-card,
  .vip-member-showcase,.prediction-metric,.onboarding-item,.activity-item,.faq-item,
  .points-reward,.points-shop-card,.operator-card,.sportsbook-card,.header-wallet-chip,
  input,select,textarea,button,a
){
  transition:
    background-color 3.65s cubic-bezier(.45,0,.18,1),
    border-color 3.55s cubic-bezier(.45,0,.18,1),
    color 3.15s cubic-bezier(.45,0,.18,1),
    box-shadow 3.7s cubic-bezier(.45,0,.18,1),
    filter 3.25s cubic-bezier(.45,0,.18,1),
    opacity .3s ease!important;
}

/* Evitar que un pseudo-elemento anterior genere una cortina o flash. */
html.nekon-growth-tester-theme.vip-theme-morphing::before,
html.nekon-growth-tester-theme.vip-theme-morphing::after{
  animation:none!important;
}

@keyframes nekonOutlinePaint{
  0%{
    opacity:0;
    background-size:0 1.5px,0 1.5px,1.5px 0,1.5px 0;
    filter:drop-shadow(0 0 0 rgba(var(--morph-rgb),0));
  }
  12%{opacity:.78}
  48%{
    opacity:.94;
    background-size:100% 1.5px,100% 1.5px,1.5px 42%,1.5px 42%;
    filter:drop-shadow(0 0 6px rgba(var(--morph-rgb),.28));
  }
  78%{
    opacity:.72;
    background-size:100% 1.5px,100% 1.5px,1.5px 100%,1.5px 100%;
  }
  100%{
    opacity:0;
    background-size:100% 1.5px,100% 1.5px,1.5px 100%,1.5px 100%;
    filter:drop-shadow(0 0 2px rgba(var(--morph-rgb),.06));
  }
}

@keyframes nekonSweepLine{
  0%{width:0;opacity:0}
  18%{opacity:.46}
  62%{width:94%;opacity:.26}
  100%{width:100%;opacity:0}
}

@keyframes nekonTierAmbient{
  0%{opacity:0}
  28%{opacity:.62}
  74%{opacity:.38}
  100%{opacity:0}
}

/* En móvil mantenemos la animación más ligera pero con la misma duración. */
@media(max-width:820px){
  .vip-theme-line-transition__outline{
    filter:drop-shadow(0 0 3px rgba(var(--morph-rgb),.20));
  }
  .vip-theme-line-transition__sweep:nth-of-type(n+5){display:none}
}

@media(prefers-reduced-motion:reduce){
  .vip-theme-line-transition{display:none!important}
  html.nekon-growth-tester-theme.vip-theme-morphing,
  html.nekon-growth-tester-theme.vip-theme-morphing *{transition-duration:.01ms!important}
}