/* Amistades: cristal violeta, medidas relativas al panel y tarjetas fotográficas. */
.ufy-friends,.ufy-people-section,.ufy-friends-sheet{--friends-text:#f8efff;--friends-muted:#d9c6ed;--friends-line:#ead4ff38;color:var(--friends-text);font-family:Arial,Helvetica,sans-serif;color-scheme:dark}
.ufy-friends *,.ufy-people-section *,.ufy-friends-sheet *{box-sizing:border-box}
.ufy-friends [hidden],.ufy-people-section [hidden],.ufy-friends-sheet [hidden]{display:none!important}
.ufy-friends button,.ufy-people-section button,.ufy-friends-sheet button{font:inherit;cursor:pointer;color:inherit}
.ufy-friends button:disabled,.ufy-people-section button:disabled,.ufy-friends-sheet button:disabled{opacity:.55;cursor:default}
.ufy-friends a,.ufy-people-section a,.ufy-friends-sheet a{color:inherit;text-decoration:none}
.ufy-friends :focus-visible,.ufy-people-section :focus-visible,.ufy-friends-sheet :focus-visible{outline:2px solid #f0ceff;outline-offset:3px}
.ufy-friends svg,.ufy-people-section svg,.ufy-friends-sheet svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ufy-people-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* El fondo fijo continúa detrás de toda la lista al desplazarla. */
.ufy-phone-app-screen[data-ufy-active-app="connections"]{background:linear-gradient(155deg,#27184145,#51304e1a 45%,#2113335c),url("/assets/ufy-phone/friends-coastal-sunset.png") center/cover no-repeat #30203f;backdrop-filter:none}
.ufy-phone-app-screen[data-ufy-active-app="connections"]>.ufy-phone-app-screen-header{display:none}
.ufy-phone-app-screen[data-ufy-active-app="connections"]>.ufy-phone-app-screen-content{padding:0;overflow:hidden}
.ufy-friends{height:100%;overflow:auto;overscroll-behavior:contain;container-type:inline-size;scrollbar-width:none}
.ufy-friends::-webkit-scrollbar,.ufy-people-rail::-webkit-scrollbar{display:none}
.ufy-friends-inner{width:min(100%,1040px);margin:auto;padding:max(12px,env(safe-area-inset-top)) clamp(16px,4.3cqw,44px) max(30px,env(safe-area-inset-bottom))}
.ufy-friends-top{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin-bottom:clamp(12px,3.2cqw,30px)}
.ufy-friends-brand{font-size:clamp(15px,2.9cqw,28px);font-weight:750;letter-spacing:.5px}
.ufy-friends-back{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;padding:8px 0 8px 8px;font-size:clamp(12px,1.8cqw,17px)!important}
.ufy-friends-back svg{width:15px;height:15px}
.ufy-friends-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:clamp(16px,2.8cqw,27px)}
.ufy-friends-heading h1{margin:0;font-size:clamp(29px,6.6cqw,62px);font-weight:750;letter-spacing:-.6px;line-height:1.1}
.ufy-friends-heading p{margin:3px 0 0;color:var(--friends-muted);font-size:clamp(13px,3cqw,28px);line-height:1.3}
.ufy-friends-add{display:grid;place-items:center;flex:none;width:clamp(38px,8.7cqw,82px);height:clamp(38px,8.7cqw,82px);border-radius:clamp(10px,2.2cqw,21px);border:1px solid #ddb8f5ad;background:#764e8340;box-shadow:inset 0 0 15px #ead3ff0f}
.ufy-friends-add{padding:0}
.ufy-friends-add svg{width:clamp(19px,4.5cqw,42px);height:clamp(19px,4.5cqw,42px)}
.ufy-friends-search{display:flex;align-items:center;gap:clamp(9px,2cqw,19px);height:clamp(42px,7.3cqw,70px);border:1px solid #e9ccf670;border-radius:999px;padding:0 clamp(13px,3cqw,29px);background:linear-gradient(110deg,#d4b5d134,#b9a5d11f);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.ufy-friends-search svg{width:clamp(20px,3.5cqw,33px);height:clamp(20px,3.5cqw,33px)}
.ufy-friends-search input{width:100%;min-width:0;height:100%;padding:0;border:0;outline:0;border-radius:0;box-shadow:none;color:#fff;background:transparent;font:inherit;font-size:clamp(13px,2.8cqw,26px)}
.ufy-friends-search input::placeholder{color:#e2cfe8bd}
.ufy-friends-tabs{display:flex;gap:12px;margin:clamp(12px,2.5cqw,24px) 0 clamp(12px,2.6cqw,25px)}
.ufy-friends-tab{min-height:34px;padding:clamp(8px,1.7cqw,16px) clamp(18px,3.3cqw,31px);border:1px solid #d9bfff91;border-radius:999px;background:linear-gradient(140deg,#b583ff,#8249f5);box-shadow:inset 0 0 9px #e5c6ff44,0 0 18px #ad76ff57;font-size:clamp(12px,2.4cqw,23px)!important}
.ufy-friends-panel{padding:clamp(12px,3.2cqw,30px);border:1px solid #d5a5f6bd;border-radius:clamp(17px,3.8cqw,36px);background:linear-gradient(120deg,#96739169,#47334e80 55%,#261e3b8f);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:inset 0 0 0 1px #e0b7ff17,inset 0 0 24px #d8a0fd1a,0 6px 24px #160c292a;margin:0 0 clamp(16px,3.8cqw,36px)}
.ufy-friends-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:clamp(8px,1.8cqw,17px)}
.ufy-friends-section-head h2{margin:0;font-size:clamp(15px,3.2cqw,30px);font-weight:650;letter-spacing:-.3px;line-height:1.25}
.ufy-friends-panel .ufy-friends-section-head h2{font-size:clamp(15px,3.55cqw,34px)}
.ufy-friends-total{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .3em;margin-left:.3em;border-radius:45%;background:#d4b4e621;font-size:.78em;vertical-align:middle}
.ufy-friends-more{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;flex-shrink:0;background:none;border:0;padding:6px 0;color:var(--friends-muted)!important;font-size:clamp(10px,2.1cqw,20px)!important;white-space:nowrap}
.ufy-friends-more svg{width:1em;height:1em}
.ufy-friends-rows{list-style:none;padding:0;margin:0}
.ufy-friend-row{display:grid;grid-template-columns:clamp(50px,13.2cqw,124px) minmax(0,1fr) auto;align-items:center;column-gap:clamp(9px,3cqw,28px);padding:clamp(8px,1.3cqw,12px) 0;border-top:1px solid var(--friends-line)}
.ufy-friend-row:last-child{padding-bottom:0}
.ufy-friend-avatar{width:clamp(50px,13.2cqw,124px);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;position:relative;border-radius:50%;border:1px solid #cd9afb;background:linear-gradient(140deg,#73567b,#322442);box-shadow:0 0 0 1px #d9b8f722}
.ufy-friend-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ufy-friend-avatar .ufy-person-initial{font-size:clamp(23px,5cqw,48px)}
.ufy-friend-copy{min-width:0}
.ufy-friend-copy strong{display:block;font-size:clamp(11px,2.65cqw,25px);font-weight:550;overflow-wrap:anywhere;line-height:1.2}
.ufy-friend-copy small{display:block;margin-top:.22em;color:var(--friends-muted);font-size:clamp(10px,2.3cqw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.ufy-friend-copy .ufy-friend-reason{display:flex;gap:.4em;align-items:center;margin-top:.5em;font-size:clamp(9px,2.1cqw,20px)}
.ufy-friend-reason svg{width:1em;height:1em}
.ufy-friend-reason span{overflow:hidden;text-overflow:ellipsis}
.ufy-friend-actions{display:flex;align-items:center;gap:clamp(6px,1.6cqw,15px)}
.ufy-friend-action{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:34px;padding:8px 12px;border-radius:999px;border:1px solid #c6afd0a6;background:#41324977;font-size:12px!important;transition:filter .15s,box-shadow .15s}
.ufy-friend-action:hover{filter:brightness(1.16)}
.ufy-friend-action:active{filter:brightness(.92)}
.ufy-friend-action svg{width:1.25em;height:1.25em}
.ufy-friend-actions .ufy-friend-action{min-height:clamp(32px,7.3cqw,69px);padding:clamp(7px,1.9cqw,18px) clamp(8px,2.2cqw,21px);font-size:clamp(10px,2.1cqw,20px)!important}
.ufy-friend-actions .ufy-friend-action svg{width:1.55em;height:1.55em}
.ufy-friend-action.is-positive{border-color:#9cfdb5;background:linear-gradient(115deg,#43da758c,#23644173);box-shadow:0 0 0 1px #a3ffc332,0 0 20px #55f78161,inset 0 0 14px #c3ffd32e}
.ufy-friend-action.is-negative{border-color:#ff8999;background:linear-gradient(115deg,#f255668c,#87354e83);box-shadow:0 0 0 1px #ffacb520,0 0 20px #ed566642,inset 0 0 14px #ffd3dc21}
.ufy-friends-empty{margin:8px 0;padding:16px 5px;color:var(--friends-muted);font-size:14px;line-height:1.55;text-align:center}
.ufy-friends-status{min-height:20px;color:#e5d8ee;font-size:13px}
.ufy-friends-status.is-error{color:#ffb5c5}
.ufy-friends-status:empty{min-height:0;margin:0}

/* La fotografía llena la tarjeta; texto y botón descansan sobre el degradado. */
.ufy-people-section{min-width:0;margin:0 0 clamp(20px,3.8cqw,36px)}
.ufy-people-rail{display:flex;gap:clamp(8px,1.6cqw,15px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:3px 2px 7px;scrollbar-width:none}
.ufy-person-card{flex:0 0 clamp(100px,25.1cqw,236px);aspect-ratio:236/330;min-width:0;position:relative;overflow:hidden;border-radius:clamp(11px,2.3cqw,22px);border:1px solid #e0b6ffca;background:#443055;scroll-snap-align:start;box-shadow:inset 0 0 0 3px #5d4581,0 0 0 2px #9370bc6b}
.ufy-person-image{position:absolute;inset:3px;display:block;border-radius:inherit;background:linear-gradient(140deg,#957099,#3f2c56);overflow:hidden}
.ufy-person-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ufy-person-initial{height:65%;display:grid;place-items:center;font-size:clamp(40px,7cqw,65px);font-weight:600;color:#f1dcff}
.ufy-person-info{position:absolute;inset:auto 3px 3px;padding:clamp(6px,1.3cqw,12px);padding-top:clamp(30px,5cqw,48px);background:linear-gradient(transparent,#2b2343e8 40%,#322442ed);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;pointer-events:none}
.ufy-person-info a,.ufy-person-info button{pointer-events:auto}
.ufy-person-info strong{display:block;font-size:clamp(11px,2.25cqw,21px);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.ufy-person-info small{display:block;margin:.22em 0;font-size:clamp(10px,2cqw,19px);color:var(--friends-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.ufy-person-info .ufy-person-reason{display:flex;align-items:center;gap:.35em;border-top:1px solid #c0a2db40;padding-top:.35em;margin-top:.3em;font-size:clamp(9px,1.9cqw,18px)}
.ufy-person-reason span{overflow:hidden;text-overflow:ellipsis}
.ufy-person-reason svg{width:1em;height:1em}
.ufy-person-card .ufy-person-connect{width:100%;min-height:clamp(26px,5.3cqw,50px);margin-top:clamp(5px,1cqw,9px);padding:4px 8px;gap:1.25em;font-size:clamp(10px,2cqw,18px)!important}
.ufy-person-connect svg{width:clamp(16px,3.3cqw,31px);height:clamp(16px,3.3cqw,31px)}
/* Invitación a seguir: cristal verde, borde luminoso y +/auricular de IMG_7362. */
.ufy-friend-action.ufy-follow-invite{color:#ecfff0;border:1.5px solid #a0efaf;border-radius:999px;background:radial-gradient(ellipse at 50% 0,#b6ffcd30,transparent 65%),linear-gradient(110deg,#38a568b0,#287c4bb8 48%,#429c5b99);box-shadow:0 0 0 1px #a5ffbb20,0 0 17px #56ee8052,inset 0 1px 2px #d7ffdc80,inset 0 0 13px #a8ffc336;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ufy-friend-action.ufy-follow-invite svg{filter:drop-shadow(0 0 3px #cdffdb7a);stroke-width:1.9}
.ufy-friend-actions .ufy-follow-invite{width:clamp(112px,21cqw,198px);min-height:clamp(40px,6.8cqw,64px);padding:7px 16px;gap:clamp(20px,3.5cqw,33px)}
.ufy-friend-actions .ufy-follow-invite svg{width:clamp(23px,3.8cqw,36px);height:clamp(23px,3.8cqw,36px)}
.ufy-friends-sheet{container-type:inline-size}
.ufy-friends-sheet .ufy-friend-row:first-child{border-top:0}
.ufy-friends-sheet .ufy-people-rail{flex-wrap:wrap;overflow:visible;gap:12px}
.ufy-friends-sheet .ufy-person-card{flex:1 1 135px;max-width:220px;min-height:205px}
.ufy-el-chat [data-people-suggestions]{container-type:inline-size;padding:0 4px;margin-top:18px}
.ufy-el-chat .ufy-chat-discovery{width:100%;min-height:210px;margin:24px 0;padding:16px 12px;border:1px solid #dfb8fb55;border-radius:22px;background:linear-gradient(130deg,#73527473,#251c378a);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ufy-el-chat .ufy-chat-discovery.is-loaded{min-height:0}
@container (max-width:480px){
 .ufy-person-info .ufy-person-reason{min-height:2.6em;align-items:flex-start}
 .ufy-person-reason span{white-space:normal;line-height:1.15}
 .ufy-person-card{aspect-ratio:100/150}
}
@container (max-width:360px){
 .ufy-friend-row{grid-template-columns:43px minmax(0,1fr) auto;column-gap:7px}
 .ufy-friend-avatar{width:43px}
 .ufy-friend-actions{gap:5px}
 .ufy-friend-actions .ufy-friend-action{padding:7px;font-size:9px!important;gap:4px}
 .ufy-friend-actions .ufy-follow-invite{width:96px;padding:7px 10px;gap:18px}
 .ufy-friend-actions .ufy-follow-invite svg{width:21px;height:21px}
 .ufy-friends-panel{padding:11px}
 .ufy-friends-panel .ufy-friends-section-head h2{font-size:13px}
 .ufy-friends-more{font-size:9px!important}
}
@media (prefers-reduced-motion:reduce){.ufy-friend-action{transition:none}}