/* Click · Marcos Premium V3
   El marco no modifica geometría y nunca se dibuja encima del avatar. */
.profile-v396-shell.has-premium-frame{
  --premium-frame-width:2px;
  --premium-frame-gradient:linear-gradient(135deg,#fff,#ddd);
  --premium-frame-glow:rgba(255,255,255,.20);
}
.profile-v396-shell.frame-bronze{
  --premium-frame-gradient:linear-gradient(135deg,#75401f 0%,#c67a35 28%,#f3d49c 50%,#b86629 72%,#67351c 100%);
  --premium-frame-glow:rgba(211,136,67,.26);
}
.profile-v396-shell.frame-silver{
  --premium-frame-gradient:linear-gradient(135deg,#68717f 0%,#d4dae6 34%,#ffffff 52%,#b9c2d2 72%,#606a78 100%);
  --premium-frame-glow:rgba(180,193,215,.28);
}
.profile-v396-shell.frame-gold{
  --premium-frame-gradient:linear-gradient(135deg,#755208 0%,#e0ad2c 28%,#fff4bd 51%,#d0960e 72%,#654507 100%);
  --premium-frame-glow:rgba(235,193,72,.31);
}

/* Portada y tarjeta: borde puramente visual. */
.profile-v396-shell.has-premium-frame .profile-v396-cover,
.profile-v396-shell.has-premium-frame .profile-v396-identity-card{
  isolation:isolate;
  overflow:visible;
  transform:translateZ(0);
}
.profile-v396-shell.has-premium-frame .profile-v396-cover::after,
.profile-v396-shell.has-premium-frame .profile-v396-identity-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  padding:var(--premium-frame-width);
  background:var(--premium-frame-gradient);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  box-shadow:0 0 10px var(--premium-frame-glow);
}

/* No usar puntos, estrellas ni partículas dentro de las tarjetas. */
.profile-v396-shell.has-premium-frame .profile-v396-cover::before,
.profile-v396-shell.has-premium-frame .profile-v396-identity-card::before{
  content:none!important;
  display:none!important;
}

/* Todo el contenido real de la tarjeta queda por encima del borde. */
.profile-v396-shell.has-premium-frame .profile-v396-identity-card > *{
  position:relative;
  z-index:2;
}

/* Avatar: aro pegado a la fotografía, no al contenedor completo. */
.profile-v396-shell.has-premium-frame .profile-v396-avatar-wrap{
  position:relative;
  z-index:8!important;
  width:max-content;
  border-radius:50%;
  overflow:visible;
  isolation:isolate;
}
.profile-v396-shell.has-premium-frame .profile-v396-avatar{
  position:relative;
  z-index:3;
  box-sizing:border-box;
}
.profile-v396-shell.has-premium-frame .profile-v396-avatar-wrap::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:2;
  border-radius:50%;
  padding:2px;
  background:var(--premium-frame-gradient);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  box-shadow:0 0 8px var(--premium-frame-glow);
}
.profile-v396-shell.has-premium-frame .profile-v396-avatar-wrap::before{
  content:none!important;
  display:none!important;
}

/* El indicador de estado NO es parte del marco premium. */
.profile-v396-shell.has-premium-frame .profile-v396-online-dot{
  z-index:10!important;
  background:#4c7dff!important;
  border-color:#fff!important;
  box-shadow:none!important;
}

/* Mantener la geometría desktop existente. */
@media(min-width:901px){
  .profile-v396-shell.has-premium-frame .profile-v396-cover{position:absolute!important;}
  .profile-v396-shell.has-premium-frame .profile-v396-identity-card{position:absolute!important;}
}

/* Móvil: el avatar siempre queda por encima del borde de la tarjeta. */
@media(max-width:900px){
  .profile-v396-shell.has-premium-frame{
    --premium-frame-width:1.5px;
  }
  .profile-v396-shell.has-premium-frame .profile-v396-cover{
    position:relative!important;
  }
  .profile-v396-shell.has-premium-frame .profile-v396-identity-card{
    position:relative!important;
    isolation:isolate;
  }

  /* Apertura en el borde superior detrás del avatar.
     Evita la línea atravesando o quedando encima de la foto. */
  .profile-v396-shell.has-premium-frame .profile-v396-identity-card::after{
    clip-path:polygon(
      0 0,
      calc(50% - 76px) 0,
      calc(50% - 76px) 4px,
      calc(50% + 76px) 4px,
      calc(50% + 76px) 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  .profile-v396-shell.has-premium-frame .profile-v396-avatar-wrap{
    z-index:12!important;
  }
  .profile-v396-shell.has-premium-frame .profile-v396-avatar-wrap::after{
    inset:-1.5px;
    padding:1.5px;
  }
}

@media(max-width:480px){
  .profile-v396-shell.has-premium-frame .profile-v396-identity-card::after{
    clip-path:polygon(
      0 0,
      calc(50% - 66px) 0,
      calc(50% - 66px) 4px,
      calc(50% + 66px) 4px,
      calc(50% + 66px) 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
}


/* Bio y contenido de la tarjeta: evitar recortes cuando hay marco premium o bios largas */
.profile-v396-shell .profile-v396-identity-card{
  box-sizing:border-box;
}
.profile-v396-shell.has-premium-frame .profile-v396-identity-card{
  height:auto!important;
  min-height:320px;
  padding-bottom:26px!important;
}
.profile-v396-shell .profile-v396-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.profile-v396-shell .profile-v396-name-row h1{
  margin:0;
}
.profile-v396-shell .profile-v396-bio-mini{
  display:block!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:unset!important;
  max-height:none!important;
  -webkit-line-clamp:unset!important;
  line-clamp:unset!important;
  line-height:1.48;
  margin:10px 0 0;
  max-width:100%;
}
.profile-v396-shell .profile-v396-social-row{
  margin-top:14px;
  flex-wrap:wrap;
}
@media (min-width:901px){
  .profile-v396-shell.has-premium-frame .profile-v396-identity-card{
    min-height:336px;
  }
}
@media (max-width:900px){
  .profile-v396-shell.has-premium-frame .profile-v396-identity-card{
    min-height:unset;
    height:auto!important;
    padding-bottom:22px!important;
  }
  .profile-v396-shell .profile-v396-bio-mini{
    font-size:.98rem;
    line-height:1.5;
  }
}


/* Bio completa: nunca truncar con CSS */
.profile-v396-shell .profile-v396-bio-mini{
  display:block!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
  max-height:none!important;
  height:auto!important;
  -webkit-line-clamp:unset!important;
  line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  word-break:break-word;
}
.profile-v396-shell.has-premium-frame .profile-v396-identity-card{
  height:auto!important;
}