/* ===== RESET & TOKENS ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#08080b;--bg1:#111116;--bg2:#18181f;--bg3:#1f1f28;--bg4:#272732;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.12);
  --accent:#7c6fff;--accent-dim:rgba(124,111,255,.15);--accent-glow:rgba(124,111,255,.35);
  --pink:#ff6ec7;--pink-dim:rgba(255,110,199,.12);--pink-glow:rgba(255,110,199,.3);
  --green:#25d366;--green-dim:rgba(37,211,102,.1);
  --red:#e74c3c;
  --t1:#f0f0f8;--t2:#9898b0;--t3:#55556a;
  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --nav-h:58px;
  --ease:cubic-bezier(.2,.8,.4,1);
}

/* ===== LIGHT MODE ===== */
body.light-mode{
  --bg:#f0f0f5;--bg1:#e8e8f0;--bg2:#ffffff;--bg3:#f5f5fa;--bg4:#e0e0ea;
  --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.14);
  --accent:#6558e8;--accent-dim:rgba(101,88,232,.12);--accent-glow:rgba(101,88,232,.3);
  --pink:#e0559e;--pink-dim:rgba(224,85,158,.1);--pink-glow:rgba(224,85,158,.25);
  --green:#1aab50;--green-dim:rgba(26,171,80,.1);
  --red:#d63031;
  --t1:#18181f;--t2:#4a4a60;--t3:#8888a0;
}
body.light-mode #mainLoader{
  background:radial-gradient(ellipse at 50% 40%,#e0dff5,#d8d8ee);
}
body.light-mode .ldr-title{
  background:linear-gradient(135deg,#18181f 30%,var(--accent),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.light-mode .ldr-bar-bg{background:rgba(0,0,0,.1)}
body.light-mode #topNav{
  background:rgba(240,240,245,.95);
  border-bottom-color:rgba(0,0,0,.08);
}
body.light-mode .nav-dd-overlay{background:rgba(0,0,0,.25)}
body.light-mode #toast{color:var(--t1);background:var(--bg2);border-color:var(--border2)}
body.light-mode ::-webkit-scrollbar-thumb{background:var(--bg4)}

/* ── Nav & bottom nav ── */
body.light-mode #bottomNav{background:rgba(240,240,245,.95);border-top-color:rgba(0,0,0,.08)}

/* ── Auth glass card ── */
body.light-mode .glass{
  background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.1);
  box-shadow:0 8px 40px rgba(0,0,0,.1);
}
body.light-mode .auth-logo{
  background:linear-gradient(135deg,#18181f,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.light-mode .auth-wrap{
  background:radial-gradient(ellipse at 50% 25%,rgba(101,88,232,.06),transparent 65%);
}

/* ── Feed head (desktop sticky) ── */
body.light-mode .feed-head{
  background:linear-gradient(180deg,rgba(240,240,245,.96),rgba(240,240,245,.78)) !important;
  border-color:rgba(0,0,0,.08) !important;
}

/* ── Reaction emoji menu ── */
body.light-mode .rx-menu{
  background:rgba(255,255,255,.98);
  border-color:rgba(0,0,0,.1);
  box-shadow:0 10px 30px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04);
}
body.light-mode .rx-menu::after{
  background:rgba(255,255,255,.98);
  border-color:rgba(0,0,0,.1);
}
body.light-mode .rxbtn span{
  background:var(--bg2);
  border-color:var(--border2);
}

/* ── Chat panel ── */
body.light-mode #chatPanel{background:var(--bg2);border-color:var(--border2)}
body.light-mode .chat-list{background:var(--bg)}
body.light-mode .chat-msg.them{background:var(--bg2);border-color:var(--border2)}
body.light-mode .chat-input-area{background:var(--bg2)}
body.light-mode .chat-header{background:var(--bg2)}

/* ── Modals ── */
body.light-mode .modal-bg{background:rgba(0,0,0,.4)}
body.light-mode .modal{background:var(--bg2);border-color:var(--border2)}

/* ── Side panels ── */
body.light-mode .side-panel{background:var(--bg2)}
body.light-mode .overlay{background:rgba(0,0,0,.3)}

/* ── Dropdown nav ── */
body.light-mode .nav-dropdown{background:var(--bg2);border-color:var(--border2)}
body.light-mode .nav-dd-item:hover{background:var(--bg3)}

/* ── Logo en el nav: cambiar color en light mode ── */
body.light-mode .nav-logo{color:var(--t1)}
body.light-mode .nav-logo span{color:var(--accent)}

/* ── Onboarding overlay ── */
body.light-mode #onboardingOverlay{background:rgba(240,240,245,.98)}

/* ── Terms modal ── */
body.light-mode #termsModal > div{background:var(--bg2) !important;border-color:var(--border2) !important}

/* ── Floater notif ── */
body.light-mode #floater{background:var(--bg2);box-shadow:0 8px 30px rgba(0,0,0,.15)}

/* ── Invite/frames panel inner cards ── */
body.light-mode .inv-hero{
  background:linear-gradient(135deg,rgba(101,88,232,.1),rgba(101,88,232,.04));
  border-color:rgba(101,88,232,.2);
}
body.light-mode .inv-progress-bar{background:var(--bg4)}

/* ── Composer & cards ── */
body.light-mode .composer{background:var(--bg2);border-color:var(--border)}
body.light-mode .ccard{background:var(--bg2)}
body.light-mode .ccard.babadito{background:linear-gradient(135deg,var(--bg2),rgba(101,88,232,.04))}

/* ── Hint bars ── */
body.light-mode .hint-wa{background:rgba(26,171,80,.08);border-color:rgba(26,171,80,.2)}
body.light-mode .hint-match{background:rgba(224,85,158,.08);border-color:rgba(224,85,158,.2)}

/* ── Profile stats ── */
body.light-mode .pstat{background:var(--bg3)}

/* ── Top rank ── */
body.light-mode .top-rank{background:var(--bg2)}

/* ── Bottom nav active tab ── */
body.light-mode .btab.active{color:var(--accent)}

/* ── Onboarding modal cards ── */
body.light-mode #obModal{background:var(--bg2) !important;border-color:rgba(101,88,232,.2) !important}
body.light-mode .ob-step > div[style*="#18181f"],
body.light-mode #obModal [style*="background:#18181f"]{background:var(--bg3) !important}
body.light-mode [style*="background:#18181f"]{background:var(--bg3) !important}
body.light-mode [style*="background:#111116"]{background:var(--bg2) !important}
body.light-mode [style*="background:#111116"]{background:var(--bg2) !important}

/* Onboarding text colors */
body.light-mode [style*="color:#f0f0f8"]{color:var(--t1) !important}
body.light-mode [style*="color:#9898b0"]{color:var(--t2) !important}
body.light-mode [style*="color:#55556a"]{color:var(--t3) !important}
body.light-mode [style*="color:#c8c8e0"]{color:var(--t1) !important}
body.light-mode [style*="color:#6b6b88"]{color:var(--t3) !important}

/* Onboarding border colors */
body.light-mode [style*="border:1px solid rgba(255,255,255,.06)"]{border-color:rgba(0,0,0,.07) !important}
body.light-mode [style*="border:1px solid rgba(255,255,255,.07)"]{border-color:rgba(0,0,0,.07) !important}
body.light-mode [style*="border:1px solid rgba(255,255,255,.1)"]{border-color:rgba(0,0,0,.1) !important}
body.light-mode [style*="border:1px solid rgba(255,255,255,.08)"]{border-color:rgba(0,0,0,.08) !important}

/* Terms modal */
body.light-mode #termsModal [style*="background:#111116"]{background:var(--bg2) !important}
body.light-mode #termsModal [style*="border-bottom:1px solid rgba(255,255,255,.07)"]{border-bottom-color:rgba(0,0,0,.08) !important}
body.light-mode #termsModal [style*="border-top:1px solid rgba(255,255,255,.07)"]{border-top-color:rgba(0,0,0,.08) !important}

/* Profile panel */
body.light-mode #profilePanel [style*="background:#18181f"]{background:var(--bg3) !important}

/* Invite panel custom frame area */
body.light-mode [style*="background:rgba(124,111,255,.07)"]{background:rgba(101,88,232,.06) !important}
body.light-mode [style*="background:rgba(255,255,255,.03)"]{background:rgba(0,0,0,.03) !important}
body.light-mode [style*="background:rgba(255,255,255,.05)"]{background:rgba(0,0,0,.04) !important}

/* Carrera select dropdown */
body.light-mode .carrera-sel{
  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='%238888a0' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  color:var(--t1);
}
body.light-mode .carrera-sel option{background:var(--bg2);color:var(--t1)}



body{
  background:var(--bg);color:var(--t1);
  font-family:'DM Sans',sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:calc(var(--safe-bottom) + 72px);
}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:4px}

/* ===== LOADER ===== */
#mainLoader{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 40%,#0d0b18,#06060a);
  z-index:9999;display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease,visibility .4s;
}
#mainLoader.hide{opacity:0;visibility:hidden;pointer-events:none}
.ldr-inner{text-align:center;padding:2rem;animation:ldrIn .5s var(--ease)}
@keyframes ldrIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.ldr-logo{
  width:90px;height:90px;object-fit:contain;
  animation:ldrFloat 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 20px var(--accent-glow));
  margin-bottom:1rem;
}
@keyframes ldrFloat{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 0 16px var(--accent-glow))}
  50%{transform:translateY(-7px);filter:drop-shadow(0 0 28px var(--accent-glow))}
}
.ldr-title{
  font-family:'Syne',sans-serif;font-weight:800;font-size:1.7rem;
  letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff 30%,var(--accent),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.25rem;
}
.ldr-sub{color:var(--t3);font-size:.78rem;margin-bottom:1.8rem;letter-spacing:.3px}
.ldr-bar-bg{width:240px;max-width:75vw;height:3px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin:0 auto}
body.light-mode .ldr-bar-bg{background:rgba(0,0,0,.1)}
.ldr-bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--pink));
  border-radius:4px;transition:width .25s ease;
}
.ldr-pct{font-family:'Syne',monospace;font-size:.72rem;color:var(--accent);font-weight:700;margin-top:.6rem;letter-spacing:1px}
.ldr-status{font-size:.72rem;color:var(--t3);margin-top:.8rem;display:flex;align-items:center;justify-content:center;gap:6px}
.ldr-dots span{
  display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%;
  animation:dotP 1.4s ease-in-out infinite;
}
.ldr-dots span:nth-child(2){animation-delay:.2s}
.ldr-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotP{0%,60%,100%{opacity:.2;transform:scale(.7)}30%{opacity:1;transform:scale(1.3)}}
.ldr-tip{
  margin-top:1.4rem;padding:.55rem 1rem;
  background:var(--accent-dim);border:1px solid rgba(124,111,255,.18);
  border-radius:50px;font-size:.68rem;color:var(--t2);
  display:inline-flex;align-items:center;gap:5px;
}

/* ===== TOAST ===== */
#toast{
  position:fixed;bottom:calc(var(--safe-bottom) + 80px);left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:50px;padding:.6rem 1.3rem;
  font-size:.82rem;font-weight:500;
  z-index:8000;opacity:0;
  transition:opacity .2s,transform .2s;
  pointer-events:none;white-space:nowrap;
  max-width:90vw;overflow:hidden;text-overflow:ellipsis;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== FLOATING NOTIFICATION ===== */
#floater{
  position:fixed;top:calc(var(--nav-h) + var(--safe-top) + 8px);right:12px;
  max-width:310px;width:calc(100vw - 24px);
  background:var(--bg2);border:1px solid var(--accent);border-radius:var(--r-lg);
  padding:.85rem;z-index:7000;
  transform:translateX(calc(100vw + 20px));
  transition:transform .4s cubic-bezier(.2,.9,.4,1.1);
  box-shadow:0 8px 30px rgba(0,0,0,.35),0 0 0 1px rgba(124,111,255,.08);
  cursor:pointer;
  overflow:hidden;
}
#floater.show{transform:translateX(0)}
.fl-inner{display:flex;gap:10px;align-items:flex-start}
.fl-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg3);flex-shrink:0;font-size:1.5rem}
.fl-body{flex:1;min-width:0}
.fl-title{font-size:.78rem;font-weight:700;color:var(--accent);margin-bottom:2px}
.fl-msg{font-size:.76rem;color:var(--t2);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fl-time{font-size:.62rem;color:var(--t3);margin-top:4px}
.fl-close{position:absolute;top:8px;right:10px;font-size:.9rem;color:var(--t3);cursor:pointer;padding:2px 5px;line-height:1}

/* ===== TOP NAV ===== */
#topNav{
  position:fixed;top:0;left:0;right:0;
  padding:calc(var(--safe-top) + .55rem) 1rem .55rem;
  background:rgba(8,8,11,.9);backdrop-filter:blur(18px) saturate(1.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.8);
  border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  z-index:300;height:calc(var(--nav-h) + var(--safe-top));
  gap:8px;
}
.nav-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-brand img{width:26px;height:26px;object-fit:contain}
.nav-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:.9rem;letter-spacing:-.02em;color:var(--t1)}
.nav-logo span{color:var(--accent)}

/* ── Zona derecha ── */
.nav-right{display:flex;align-items:center;gap:6px}

/* Botones icono circulares */
.nav-ico-btn{
  position:relative;
  width:36px;height:36px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .15s,background .15s;
  flex-shrink:0;color:var(--t2);
}
.nav-ico-btn:hover{border-color:var(--border2);background:var(--bg3)}
.nav-ico-btn .notif-dot{
  position:absolute;top:3px;right:3px;
  width:8px;height:8px;
  background:var(--pink);border-radius:50%;
  border:2px solid var(--bg);display:none;
}
.nav-ico-btn .notif-dot.on{display:block}

/* notifDot campana */
#notifDot{
  position:absolute;top:3px;right:3px;width:8px;height:8px;
  background:var(--pink);border-radius:50%;border:2px solid var(--bg);display:none;
}
#notifDot.on{display:block}

/* ── Avatar + nombre (abre dropdown) ── */
.nav-avatar-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:50px;padding:.3rem .6rem .3rem .35rem;
  cursor:pointer;transition:border-color .15s,background .15s;
  user-select:none;max-width:200px;
}
.nav-avatar-wrap:hover,.nav-av-active{border-color:var(--accent)!important;background:var(--bg3)!important}
.nav-av-circle{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;flex-shrink:0;overflow:visible;
  background:var(--bg3);position:relative;transform:translateZ(0);
}
.nav-av-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nav-user-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.nav-name{font-size:.75rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.nav-meta{display:flex;align-items:center;gap:4px}
.nav-code{font-size:.58rem;color:var(--t3);font-family:'Syne',monospace;white-space:nowrap}
.nav-level-badge{font-size:.55rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.nav-chevron{color:var(--t3);flex-shrink:0;transition:transform .2s}
.nav-av-active .nav-chevron{transform:rotate(180deg)}

/* ── En móvil ocultar nombre, mostrar solo avatar ── */
@media(max-width:480px){
  .nav-user-info,.nav-chevron{display:none}
  .nav-avatar-wrap{padding:.3rem;border-radius:50%;gap:0}
  .nav-av-circle{width:32px;height:32px;font-size:1.15rem}
}

/* ── DROPDOWN ── */
.nav-dropdown{
  position:fixed;top:calc(var(--nav-h) + var(--safe-top) + 6px);right:12px;
  width:220px;
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r-md);
  z-index:500;
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;
  transition:opacity .18s,transform .18s;
  overflow:hidden;
}
.nav-dropdown.nav-dd-open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.nav-dd-overlay{position:fixed;inset:0;z-index:499;display:none}
.nav-dd-overlay.nav-dd-open{display:block}

.nav-dd-header{display:flex;align-items:center;gap:10px;padding:12px 14px}
.nav-dd-av{
  width:40px;height:40px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;overflow:hidden;
}
.nav-dd-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nav-dd-info{min-width:0;flex:1}
.nav-dd-name{font-size:.82rem;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-dd-code{font-size:.62rem;color:var(--t3);font-family:'Syne',monospace;margin-top:1px}
.nav-dd-level{font-size:.62rem;color:var(--accent);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-dd-sep{height:1px;background:var(--border);margin:0}
.nav-dd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;font-size:.82rem;color:var(--t2);
  cursor:pointer;transition:background .12s,color .12s;
}
.nav-dd-item:hover{background:var(--bg3);color:var(--t1)}
.nav-dd-ico{font-size:1rem;flex-shrink:0;width:20px;text-align:center}
.nav-dd-danger{color:var(--red)}
.nav-dd-danger:hover{background:rgba(231,76,60,.08);color:var(--red)}
.nav-dd-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--pink);margin-left:auto;flex-shrink:0;display:none;
}
.nav-dd-dot.on{display:block}

/* ── Logo image adapts to light mode ── */
body.light-mode .nav-brand img,
body.light-mode .auth-brand img{
  filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(600%) hue-rotate(225deg) brightness(85%);
}
body.light-mode .ldr-logo{
  filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(600%) hue-rotate(225deg) brightness(85%) drop-shadow(0 0 20px rgba(101,88,232,.4));
}
.nav-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem}

/* notif-wrap que queda en script.js */
.notif-wrap{position:relative}
.notif-ico{
  width:36px;height:36px;background:var(--bg2);border:1px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;transition:border-color .15s;overflow:hidden;
}
.notif-ico:hover{border-color:var(--border2)}

.logout-ico{
  background:none;border:none;cursor:pointer;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:opacity .15s;font-size:.9rem;color:var(--t2);
}
.logout-ico:hover{opacity:1}

/* ===== MAIN AREA ===== */
#app{
  padding-top:calc(var(--nav-h) + var(--safe-top) + 12px);
  min-height:100vh;display:none;
}
#app.on{display:block}

.container{max-width:680px;margin:0 auto;padding:0 12px}

/* ===== BOTTOM TABS (mobile) ===== */
#bottomNav{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(8,8,11,.92);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  display:none;
  grid-template-columns:repeat(3,1fr);
  z-index:200;
  padding-bottom:var(--safe-bottom);
}
#bottomNav.on{display:grid}
.btab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:.7rem .5rem;
  font-size:.65rem;font-weight:600;color:var(--t3);
  cursor:pointer;border:none;background:none;
  transition:color .15s;font-family:inherit;
}
.btab .bico{
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.btab .bico img{ width: 100%; height: 100%; object-fit: contain; opacity: .5; transition: opacity .15s; }
.btab.active{color:var(--accent)}
.btab.active .bico img{ opacity: 1; filter: drop-shadow(0 0 5px var(--accent-glow)); }

/* ===== EVENT BANNER ===== */
#evBanner{
  display:none;
  background:linear-gradient(135deg,rgba(124,111,255,.12),rgba(255,107,107,.08));
  border:1px solid rgba(124,111,255,.2);border-radius:var(--r-md);
  padding:.65rem 1rem;margin:0 0 .9rem;
  font-size:.78rem;align-items:center;gap:8px;color:var(--t2);
}
#evBanner.on{display:flex}

/* ===== COMPOSER ===== */
.composer{
  background:var(--bg1);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:1rem;margin-bottom:1rem;
  transition:border-color .2s;
}
.composer:focus-within{border-color:rgba(124,111,255,.4)}
.comp-head{display:flex;gap:10px;align-items:center;margin-bottom:.85rem}
.comp-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex-shrink:0}
.comp-who{flex:1;min-width:0}
.comp-name{font-weight:700;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comp-anon{font-size:.65rem;color:var(--t3)}

textarea{
  width:100%;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.85rem;
  color:var(--t1);font-family:'DM Sans',sans-serif;font-size:.9rem;
  resize:vertical;min-height:90px;outline:none;
  transition:border-color .15s;
}
textarea:focus{border-color:var(--accent)}

.carrera-sel{
  width:100%;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.5rem .75rem;
  color:var(--t2);font-size:.78rem;outline:none;
  margin:.6rem 0;appearance:none;
  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='%2355556a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
  padding-right:2rem;
}
.carrera-sel:focus{border-color:var(--accent)}

.cat-pills{display:flex;gap:5px;flex-wrap:wrap;margin:.6rem 0}
.cpill{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:50px;padding:.3rem .75rem;
  font-size:.74rem;font-weight:500;cursor:pointer;
  transition:all .15s;color:var(--t2);
  white-space:nowrap;
}
.cpill.on{background:var(--accent);border-color:var(--accent);color:#fff}

.hint-wa,.hint-match{
  display:none;border-radius:var(--r-sm);
  padding:.5rem .8rem;font-size:.72rem;margin:.4rem 0;
  align-items:center;gap:7px;
}
.hint-wa{background:var(--green-dim);border:1px solid rgba(37,211,102,.2);color:var(--green)}
.hint-match{background:var(--pink-dim);border:1px solid rgba(255,110,199,.2);color:var(--pink)}
.hint-wa.on,.hint-match.on{display:flex}

/* ===== CHAT SYSTEM (MESSENGER STYLE) ===== */
#chatPanel{
  position: fixed; bottom: 85px; right: 20px; width: min(350px, 90vw); height: 450px;
  background: var(--bg1); border: 1px solid var(--border2); border-radius: var(--r-lg);
  box-shadow: 0 10px 40px rgba(0,0,0,.5); z-index: 9000; display: none; flex-direction: column;
  overflow: hidden; animation: chatOpen .3s var(--ease);
}
@keyframes chatOpen { from{ opacity:0; transform: translateY(20px) scale(.9); } to{ opacity:1; transform: translateY(0) scale(1); } }
#chatPanel.on{ display: flex; }

.chat-bubble-wrap{
  position: fixed; bottom: 100px; right: 20px; z-index: 8500; display: none;
  width: 60px; height: 60px; cursor: pointer; transition: transform .2s;
}
.chat-bubble-wrap.on{ display: block; }
.chat-bubble-wrap:active{ transform: scale(.9); }
.chat-bubble{
  width: 100%; height: 100%; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--bg); box-shadow: 0 4px 15px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; font-size: 2rem; overflow: hidden;
}
.chat-bubble img{ width: 100%; height: 100%; object-fit: cover; }
.chat-badge{
  position: absolute; top: 0; right: 0; background: var(--red); color: #fff;
  font-size: .7rem; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg); padding: 0 4px; display: none;
}
.chat-badge.on{ display: flex; }

.chat-list{ flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.chat-msg{
  max-width: 80%; padding: .55rem .85rem; border-radius: 18px; font-size: .85rem; line-height: 1.4;
  position: relative; word-break: break-word;
}
.chat-msg.me{ align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.them{ align-self: flex-start; background: var(--bg2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-time{ font-size: .55rem; opacity: .6; margin-top: 2px; display: block; }
.chat-msg.me .chat-time{ text-align: right; }

.chat-input-area{ padding: .7rem; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-end; background: var(--bg1); }
.chat-in{
  flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;
  padding: .5rem .9rem; color: var(--t1); font-size: .85rem; outline: none; resize: none; min-height: 36px; max-height: 100px;
  font-family: inherit;
}
.chat-send{
  background: var(--accent); border: none; border-radius: 50%; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; color: #fff; flex-shrink: 0;
}
.chat-send:hover{ background: #6b5ef0; }

.chat-header{ padding: .7rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; background: var(--bg1); }
.chat-header-av{ width: 30px; height: 30px; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; overflow: hidden; }
.chat-header-av img{ width: 100%; height: 100%; object-fit: cover; }
.chat-header-info{ flex: 1; }
.chat-header-name{ font-size: .82rem; font-weight: 700; }
.chat-header-status{ font-size: .6rem; color: var(--green); }

.btn-submit{
  background:var(--accent);border:none;border-radius:var(--r-md);
  padding:.7rem 1.4rem;font-weight:700;font-size:.85rem;
  color:#fff;cursor:pointer;font-family:inherit;
  transition:all .15s;margin-top:.6rem;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-submit:active{transform:scale(.97)}
.btn-submit:hover{background:#6b5ef0;box-shadow:0 4px 16px -4px var(--accent-glow)}

/* ===== NEW POSTS BANNER ===== */
#newBanner{
  display:none;
  background:linear-gradient(135deg,var(--accent),#a855f7);
  border-radius:50px;padding:.48rem 1.1rem;
  font-size:.8rem;font-weight:700;color:#fff;
  text-align:center;cursor:pointer;
  margin-bottom:.7rem;
  animation:slideD .3s var(--ease);
}
#newBanner.on{display:block}
@keyframes slideD{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ===== FEED FILTERS ===== */
.feed-head{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:.8rem;
  overflow-x:auto;
  padding-bottom:2px
}

.feed-head::-webkit-scrollbar{display:none}

.fbtn{
  background:transparent;
  border:1px solid var(--border2);
  border-radius:50px;
  padding:.3rem .8rem;
  font-size:.74rem;
  font-weight:500;
  cursor:pointer;
  color:var(--t3);
  font-family:inherit;
  white-space:nowrap;
  transition:all .15s;
  flex-shrink:0;
}

.fbtn.on{
  background:var(--bg2);
  border-color:var(--accent);
  color:var(--accent)
}

.sbtn{
  background:transparent;
  border:1px solid var(--border2);
  border-radius:50px;
  padding:.3rem .8rem;
  font-size:.74rem;
  font-weight:500;
  cursor:pointer;
  color:var(--t3);
  font-family:inherit;
  white-space:nowrap;
  transition:all .15s;
  flex-shrink:0;
}

.sbtn.on{
  background:var(--bg2);
  border-color:#f39c12;
  color:#f39c12;
}

.ftab{
  flex:1;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:50px;
  padding:.38rem .75rem;
  font-size:.74rem;
  font-weight:600;
  color:var(--t3);
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
  white-space:nowrap;
}

.ftab.on{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.ftab:hover:not(.on){
  background:var(--bg4);
  border-color:var(--border2);
  color:var(--t2);
}

/* ===== CONFESSION CARD ===== */
.ccard{
  background:var(--bg1);
  border:1px solid var(--border);
}

/* ===== CONFESSION CARD ===== */
.ccard{
  background:var(--bg1);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:1rem;
  margin-bottom:.7rem;
  transition:transform .2s,border-color .2s;
  animation:cardIn .3s var(--ease);
  overflow:visible;
}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ccard:active{transform:scale(.995)}
.ccard.highlight{
  animation:hlCard 2.5s var(--ease) forwards;
  border-color:var(--accent)!important;
}
.ccard.babadito{
  border: 1px solid rgba(124,111,255,.3);
  background: linear-gradient(135deg, var(--bg1), rgba(124,111,255,.05));
  box-shadow: 0 4px 15px rgba(124,111,255,.05);
}
.ccard.babadito .cat-tag{
  background: var(--accent);
  color: #fff;
  animation: pulseB 2s infinite;
}
@keyframes pulseB {
  0% { box-shadow: 0 0 0 0 rgba(124,111,255, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(124,111,255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124,111,255, 0); }
}
.expire-timer{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .65rem;
  color: var(--pink);
  font-weight: 700;
  background: var(--pink-dim);
  padding: 2px 8px;
  border-radius: 50px;
  margin-bottom: 8px;
}
@keyframes hlCard{
  0%{box-shadow:0 0 0 3px rgba(124,111,255,.8)}
  70%{box-shadow:0 0 0 3px rgba(124,111,255,.3)}
  100%{box-shadow:none}
}
.ch{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.65rem}
.cav-row{display:flex;align-items:center;gap:8px}
.cav{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;overflow:visible;position:relative;transform:translateZ(0)}
.calias{font-weight:700;font-size:.86rem;display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.ucode{font-size:.58rem;font-weight:700;font-family:'Syne',monospace;color:var(--t3);background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:1px 4px}
.mybadge{font-size:.58rem;background:var(--accent-dim);color:var(--accent);border-radius:10px;padding:1px 6px}
.ctime{font-size:.62rem;color:var(--t3)}
.carrera-t{display:inline-block;font-size:.6rem;background:rgba(46,204,113,.1);color:#2ecc71;border:.5px solid rgba(46,204,113,.2);border-radius:50px;padding:.12rem .5rem;margin-top:2px}
.cat-tag{font-size:.66rem;padding:.18rem .6rem;border-radius:50px;background:var(--accent-dim);color:var(--accent);border:.5px solid rgba(124,111,255,.2);white-space:nowrap;flex-shrink:0}
.ctxt{font-size:.9rem;line-height:1.65;color:var(--t1);margin:.6rem 0;word-break:break-word;white-space:pre-wrap}

/* wa badge */
.wa-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--green-dim);border:1px solid rgba(37,211,102,.25);
  border-radius:50px;padding:.22rem .7rem;font-size:.7rem;
  color:var(--green);font-weight:600;cursor:pointer;
  margin-bottom:.5rem;
}

/* reactions - estilo Facebook: ocultas dentro del corazón hasta hover */
.rxrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:.5rem 0;
  min-height:42px;
  isolation:isolate;
}
.rx-heart-trigger{
  height:34px;
  min-width:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--t2);
  font-family:inherit;
  font-size:.82rem;
  font-weight:700;
  line-height:1;
  padding:.26rem .68rem;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.rx-heart-trigger .rx-heart-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
}
.rx-heart-trigger .rx-heart-ico img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.rx-heart-trigger .rx-total{font-size:.75rem;color:var(--t3);line-height:1}
.rxrow.has-my-rx .rx-heart-trigger{color:var(--accent);border-color:rgba(124,111,255,.32);background:var(--accent-dim)}
.rxrow:hover .rx-heart-trigger,.rxrow:focus-within .rx-heart-trigger{background:var(--bg3);border-color:var(--border2);color:var(--t1)}

.rx-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 6px);
  display:flex;
  align-items:center;
  gap:4px;
  padding:.32rem .45rem;
  background:rgba(24,24,31,.98);
  border:1px solid var(--border2);
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.03);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px) scale(.86);
  transform-origin:left bottom;
  transition:opacity .16s ease,visibility .16s ease,transform .2s cubic-bezier(.175,.885,.32,1.275);
  z-index:20;
  white-space:nowrap;
}
.rxrow:hover .rx-menu,.rxrow:focus-within .rx-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.rx-menu::after{
  content:'';
  position:absolute;
  left:18px;
  bottom:-7px;
  width:14px;
  height:14px;
  background:rgba(24,24,31,.98);
  border-right:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  transform:rotate(45deg);
  z-index:-1;
}
.rxbtn{
  width:38px;
  height:38px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  color:var(--t2);
  position:relative;
  border-radius:50%;
  transform:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s cubic-bezier(.175,.885,.32,1.275),filter .16s ease;
}
.rxbtn img{
  width:32px;
  height:32px;
  object-fit:contain;
  pointer-events:none;
  transform:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.rxbtn span{
  position:absolute;
  right:-3px;
  bottom:-2px;
  min-width:15px;
  height:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--border2);
  color:var(--t2);
  font-size:.56rem;
  font-weight:800;
  line-height:1;
}
.rxrow:hover .rxbtn:hover,.rxrow:focus-within .rxbtn:focus{transform:scale(1.32) translateY(-8px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.32))}
.rxbtn.on img{filter:drop-shadow(0 0 8px var(--accent-glow))}
@keyframes rxPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.45) rotate(10deg)}
  100%{transform:scale(1)}
}
.rxrow:hover .rxbtn.pop img,.rxrow:focus-within .rxbtn.pop img,.rxrow.rx-open .rxbtn.pop img{animation:rxPop .38s cubic-bezier(.175,.885,.32,1.275)}

/* match btn */
.match-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--pink-dim);border:1px solid rgba(255,110,199,.3);
  border-radius:50px;padding:.36rem .9rem;
  font-size:.8rem;color:var(--pink);font-weight:600;
  cursor:pointer;transition:all .2s;font-family:inherit;
}
.match-btn:hover{background:rgba(255,110,199,.2)}
.match-btn.on{background:var(--pink);color:#fff;border-color:var(--pink)}
@keyframes mPop{0%{transform:scale(1)}30%{transform:scale(1.2)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.match-btn.pop{animation:mPop .4s ease}
.mcnt{font-size:.7rem;color:var(--t3)}

/* actions */
.abar{display:flex;gap:3px;flex-wrap:wrap;margin-top:.45rem}
.abtn{
  background:none;border:none;display:flex;align-items:center;gap:6px;
  color:var(--t3);cursor:pointer;font-size:.74rem;
  padding:.35rem .65rem;border-radius:50px;
  transition:all .15s;font-family:inherit;
  font-weight: 500;
}
.abtn img{ width: 16px; height: 16px; object-fit: contain; opacity: .7; transition: opacity .15s; }
.abtn:hover{background:var(--bg3);color:var(--t2)}
.abtn:hover img{ opacity: 1; }
.abtn.red{color:#e74c3c}
.abtn.red img{ opacity: 1; filter: drop-shadow(0 0 2px rgba(231,76,60,.3)); }
.abtn.red:hover{background:rgba(231,76,60,.1);color:var(--red)}

/* comments */
.cmtsec{margin-top:.8rem;border-top:1px solid var(--border);padding-top:.8rem;display:none}
.cmtsec.on{display:block}
.cmt-item{display:flex;gap:7px;margin-bottom:.7rem}
.cmt-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.cmt-bubble{background:var(--bg2);border:1px solid var(--border);border-radius:0 var(--r-md) var(--r-md) var(--r-md);padding:.45rem .75rem;flex:1}
.cmt-author{font-size:.68rem;font-weight:700;color:var(--accent)}
.cmt-txt{font-size:.82rem;line-height:1.5}
.cmt-t{font-size:.6rem;color:var(--t3);margin-top:.15rem}
.cmt-compose{display:flex;gap:7px;align-items:flex-end;margin-top:.6rem}
.cmt-in{
  flex:1;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.5rem .85rem;
  color:var(--t1);font-size:.82rem;resize:none;
  min-height:36px;outline:none;font-family:inherit;
}
.cmt-in:focus{border-color:var(--accent)}
.cmt-send{
  background:var(--accent);border:none;border-radius:var(--r-md);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:background .15s;
  font-size:.9rem;
}
.cmt-send:hover{background:#6b5ef0}

/* ===== AUTH ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:radial-gradient(ellipse at 50% 25%,rgba(124,111,255,.07),transparent 65%)}
.glass{
  background:rgba(17,17,22,.8);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:1.6rem;width:100%;max-width:480px;
}
.auth-brand{display:flex;align-items:center;gap:9px;margin-bottom:.4rem}
.auth-brand img{width:28px;height:28px;object-fit:contain}
.auth-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;background:linear-gradient(135deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-badge{display:inline-block;background:var(--accent-dim);border:1px solid rgba(124,111,255,.3);border-radius:50px;padding:.22rem .75rem;font-size:.68rem;font-weight:600;color:var(--accent);margin-bottom:.85rem}
.auth-desc{color:var(--t2);font-size:.82rem;margin-bottom:1.5rem;line-height:1.5}
.field{margin-bottom:1.1rem}
.flabel{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t2);margin-bottom:.45rem}
.finput{
  width:100%;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.8rem .9rem;
  color:var(--t1);font-size:.88rem;outline:none;
  transition:all .15s;font-family:inherit;
}
.finput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.btn-main{
  width:100%;background:var(--accent);border:none;
  border-radius:var(--r-sm);padding:.85rem;
  font-weight:700;font-size:.88rem;color:#fff;
  cursor:pointer;font-family:inherit;
  transition:all .15s;margin-top:.4rem;
}
.btn-main:hover{background:#6b5ef0;transform:translateY(-1px);box-shadow:0 6px 18px -6px var(--accent-glow)}
.btn-main:active{transform:scale(.98)}
.btn-sec{background:transparent;border:1px solid var(--border2);color:var(--t1)}
.btn-sec:hover{background:var(--bg3);transform:translateY(-1px)}
.btn-red{background:var(--red)}
.btn-red:hover{background:#c0392b}
.btn-wa2{background:var(--green)}
.btn-wa2:hover{background:#1ebe5a}
.link-act{color:var(--accent);cursor:pointer;font-size:.82rem;font-weight:600}

.av-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.av-opt{
  aspect-ratio:1;background:var(--bg2);border-radius:50px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:2px solid transparent;
  transition:all .15s;font-size:1.65rem;
}
.av-opt img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.av-opt.on{border-color:var(--accent);background:var(--bg3);transform:scale(1.05);box-shadow:0 0 14px var(--accent-glow)}

.sug-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:.4rem}
.sug{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.18rem .55rem;font-size:.7rem;cursor:pointer;color:var(--t2);transition:all .15s}
.sug:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

.priv-note{background:var(--accent-dim);border-radius:var(--r-sm);padding:.7rem;margin-top:.9rem;font-size:.68rem;text-align:center;color:var(--t2)}

.wa-row{display:flex;gap:7px;align-items:center}
.wa-pre{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:.8rem .7rem;color:var(--t3);font-size:.85rem;white-space:nowrap}

/* ===== SIDE PANELS ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:300;display:none}
.overlay.on{display:block}

.side-panel{
  position:fixed;top:0;height:100%;background:var(--bg1);
  z-index:400;transition:transform .32s var(--ease);
  overflow-y:auto;display:flex;flex-direction:column;
}
.panel-r{right:0;width:min(360px,100vw);transform:translateX(100%)}
.panel-l{left:0;width:min(380px,100vw);transform:translateX(-100%)}
.side-panel.on{transform:translateX(0)}

.ph{padding:1.2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.ph h3{font-family:'Syne',sans-serif;font-weight:700}
.pclose{cursor:pointer;font-size:1.2rem;color:var(--t3);padding:2px 6px;border-radius:6px;transition:color .15s}
.pclose:hover{color:var(--t1)}

/* Notifications */
.nlist{flex:1;overflow-y:auto;padding:.4rem}
.nitem{
  display:flex;align-items:flex-start;gap:8px;
  padding:.75rem;border-radius:var(--r-md);margin-bottom:.25rem;
  cursor:pointer;transition:background .15s;
}
.nitem:hover{background:var(--bg2)}
.nitem.unread{background:var(--accent-dim);border:1px solid rgba(124,111,255,.1)}
.nitem.unread.pink{background:var(--pink-dim);border-color:rgba(255,110,199,.12)}
.nico{width:34px;height:34px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.nbody{flex:1}
.ntxt{font-size:.8rem;line-height:1.4;color:var(--t1)}
.ntime{font-size:.65rem;color:var(--t3);margin-top:2px}
.nacb{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,var(--pink),#a855f7);
  border:none;border-radius:50px;padding:.3rem .8rem;
  font-size:.72rem;font-weight:700;color:#fff;cursor:pointer;
  margin-top:.4rem;font-family:inherit;transition:all .15s;
}
.nacb:hover{transform:scale(1.04);box-shadow:0 4px 12px -2px var(--pink-glow)}
.nempty{text-align:center;padding:3rem 1rem;color:var(--t3);font-size:.82rem}

/* Profile */
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:1rem}
.pstat{background:var(--bg2);border-radius:var(--r-sm);padding:.65rem;text-align:center}
.pstat-n{font-size:1.25rem;font-weight:700;color:var(--accent);font-family:'Syne',sans-serif}
.pstat-l{font-size:.63rem;color:var(--t3)}
.lv-box{background:var(--accent-dim);border:1px solid rgba(124,111,255,.2);border-radius:var(--r-md);padding:.85rem;margin-bottom:.9rem;text-align:center}
.lv-name{font-family:'Syne',sans-serif;font-weight:700;color:var(--accent)}
.lv-xp{font-size:.7rem;color:var(--t3)}
.xp-bg{background:var(--bg2);border-radius:50px;height:5px;margin-top:7px;overflow:hidden}
.xp-fill{background:var(--accent);height:100%;border-radius:50px;transition:width .5s ease}
.badges-row{display:flex;flex-wrap:wrap;gap:6px;margin:.6rem 0}
.bdg{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:.4rem .7rem;font-size:.7rem;display:flex;align-items:center;gap:5px;color:var(--t2)}
.bdg.locked{opacity:.3}
.pcode-box{text-align:center;margin-bottom:.9rem}
.pcode-val{font-family:'Syne',monospace;font-size:1rem;font-weight:700;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(124,111,255,.2);border-radius:var(--r-md);padding:.45rem 1rem;display:inline-block}

/* ===== MODALS ===== */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-bg.on{display:flex;animation:mfade .25s ease}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg1);border:1px solid var(--border2);
  border-radius:var(--r-xl);padding:1.4rem;
  width:100%;max-width:460px;position:relative;
  animation:mslide .28s var(--ease);
}
@keyframes mslide{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.mclose{position:absolute;top:.7rem;right:.9rem;cursor:pointer;font-size:1.1rem;color:var(--t3)}
.mquote{background:var(--bg2);padding:.8rem;border-radius:var(--r-sm);margin:.8rem 0;border-left:3px solid var(--accent);font-size:.85rem;word-break:break-word;color:var(--t2)}

/* Share */
.share-link-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:.7rem .9rem;margin:.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.share-url{font-size:.73rem;color:var(--accent);font-family:monospace;word-break:break-all;flex:1}
.copy-btn2{background:var(--accent-dim);border:1px solid rgba(124,111,255,.3);border-radius:var(--r-sm);padding:.35rem .75rem;font-size:.7rem;font-weight:600;color:var(--accent);cursor:pointer}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:.8rem 0}
.splatbtn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:.75rem .4rem;font-size:.7rem;font-weight:600;
  cursor:pointer;color:var(--t2);transition:all .15s;
}
.splatbtn svg{width:20px;height:20px}
.splatbtn:hover{transform:translateY(-2px);border-color:var(--border2)}
.splatbtn.wa{color:var(--green)}.splatbtn.fb{color:#1877f2}
.splatbtn.ig{color:#e1306c}.splatbtn.tw{color:#fff}
.splatbtn.tg{color:#2aabee}.splatbtn.cp{color:var(--accent)}

/* Match Modal */
.match-hearts{font-size:2.8rem;margin-bottom:.4rem;animation:mPop .6s ease}
.match-avs{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:1rem 0}
.match-av-w{display:flex;flex-direction:column;align-items:center;gap:3px}
.match-plus{font-size:1.4rem;color:var(--pink)}
.match-alias-t{font-size:.72rem;color:var(--t2);max-width:75px;overflow:hidden;text-overflow:ellipsis;text-align:center}
.match-wa-box{background:var(--green-dim);border:1px solid rgba(37,211,102,.25);border-radius:var(--r-md);padding:.8rem;margin:.8rem 0;cursor:pointer}
.match-wa-box:hover{background:rgba(37,211,102,.18)}
.match-wa-lbl{font-size:.7rem;color:var(--t3)}
.match-wa-n{font-size:.95rem;font-weight:700;color:var(--green)}

/* WA Modal */
.wa-flag{display:inline-block;background:var(--green-dim);border:1px solid rgba(37,211,102,.3);border-radius:50px;padding:.2rem .7rem;font-size:.68rem;color:var(--green);margin-bottom:.7rem}

/* Spinner */
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spinA .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spinA{to{transform:rotate(360deg)}}

/* Empty */
.empty{text-align:center;padding:2.5rem 1rem;color:var(--t3)}
.empty big{font-size:2rem;display:block;margin-bottom:.5rem}

/* Top section */
.top-rank{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r-md);padding:.8rem .9rem;margin-bottom:.5rem;display:flex;align-items:center;gap:10px;cursor:pointer}
.top-rank:hover{border-color:var(--border2)}
.rnk{font-size:.72rem;font-weight:700;color:var(--accent);background:var(--accent-dim);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rtxt{font-size:.83rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrxn{font-size:.78rem;color:var(--t3)}

@media(max-width:480px){
  .glass{padding:1.2rem}
  .av-grid{grid-template-columns:repeat(4,1fr)}
  .ccard{border-radius:var(--r-lg)}
}

/* Category specific styles */
.ccard.emprendimiento {
  border-left: 3px solid var(--green);
  background: linear-gradient(to right, rgba(37,211,102,0.03), transparent);
}
.ccard.resolved {
  opacity: 0.8;
  border-left: 3px solid var(--green);
}
.ccard.resolved .ctxt {
  text-decoration: line-through;
  color: var(--t3);
}
.duda-meta {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
}


/* Friends and Categories Styles */
.notif-dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; background: var(--pink); border-radius: 50%; border: 2px solid var(--bg); display: none; }
.ccard.emprendimiento { border-left: 3px solid var(--green); background: linear-gradient(to right, rgba(37,211,102,0.03), transparent); }
.ccard.resolved { opacity: 0.8; border-left: 3px solid var(--green); }
.ccard.resolved .ctxt { text-decoration: line-through; color: var(--t3); }
.duda-meta { font-family: 'Syne', sans-serif; font-weight: 700; }
.fl-item:hover { background: var(--bg2); }

/* ===== RESPONSIVE PRO: PC + TABLET + CELULAR ===== */
*{box-sizing:border-box}
html{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{min-width:320px;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
button,input,textarea,select{font:inherit;max-width:100%}

/* Escritorio: lectura cómoda, navegación visible y tarjetas con más aire */
@media (min-width: 1024px){
  #app{padding-top:calc(var(--safe-top) + 88px);padding-bottom:48px}
  .container{max-width:760px;padding:0 20px}
  #topNav{padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem)}
  .nav-brand{min-width:220px}
  .composer,.ccard{box-shadow:0 18px 55px rgba(0,0,0,.22)}
  .ccard{padding:1.05rem 1.1rem}
  .feed-head{position:sticky;top:calc(var(--safe-top) + 74px);z-index:120;background:linear-gradient(180deg,rgba(10,10,14,.94),rgba(10,10,14,.72));backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:999px;padding:.45rem;margin-bottom:1rem}
  #bottomNav{max-width:460px;left:50%;right:auto;transform:translateX(-50%);bottom:18px;border:1px solid var(--border2);border-radius:999px;padding:.35rem;box-shadow:0 18px 45px rgba(0,0,0,.38)}
  #chatPanel{right:28px;bottom:96px;width:390px;height:min(620px,72vh)}
  .panel-r,.panel-l{width:420px;max-width:92vw}
  .modal{max-height:86vh}
}

/* Tablet: paneles y filtros cómodos al tacto */
@media (max-width: 900px){
  .container{max-width:720px;padding:0 14px}
  .nav-info{display:none}
  .nav-brand{gap:8px}
  .nav-logo{font-size:1rem}
  .feed-head{gap:8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .fbtn,.sbtn,.cpill{min-height:38px;scroll-snap-align:start}
  .side-panel{width:min(440px,100vw)}
}

/* Celular: layout tipo app nativa, sin desbordes y con areas seguras */
@media (max-width: 640px){
  :root{--r-xl:22px;--r-lg:18px;--r-md:14px}
  #topNav{padding:calc(var(--safe-top) + .55rem) .75rem .55rem;min-height:64px}
  .nav-right{gap:6px}
  .nav-pill{height:40px;padding:0 .55rem;border-radius:999px;max-width:calc(100vw - 140px)}
  .nav-name{max-width:70px}
  .notif-ico{width:40px;height:40px;flex-shrink:0}
  #app{padding-top:calc(var(--safe-top) + 76px);padding-bottom:calc(var(--safe-bottom) + 96px)}
  .container{width:100%;max-width:none;padding:0 10px}
  #evBanner{font-size:.78rem;border-radius:14px;margin-bottom:.65rem}
  .composer{padding:.85rem;border-radius:20px;margin-bottom:.8rem}
  .comp-head{gap:9px;margin-bottom:.7rem}
  .comp-av{width:38px;height:38px;font-size:1.45rem}
  #confTxt{min-height:104px;font-size:16px;line-height:1.45}
  .carrera-sel,.finput{font-size:16px;min-height:44px}
  .cat-pills{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .cat-pills::-webkit-scrollbar,.feed-head::-webkit-scrollbar{display:none}
  .cat-pills .cpill{white-space:nowrap;flex:0 0 auto;scroll-snap-align:start}
  .btn-submit,.btn-main{width:100%;min-height:46px;justify-content:center}
  .feed-head{margin-left:-10px;margin-right:-10px;padding:0 10px 6px;border-bottom:1px solid var(--border);flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .feed-head > div[style*="flex:1"]{display:none}
  .fbtn,.sbtn{white-space:nowrap;flex:0 0 auto;min-height:38px}
  .ccard{border-radius:20px;padding:.9rem;margin-bottom:.8rem}
  .cmeta{gap:7px;flex-wrap:wrap}
  .ctxt{font-size:.96rem;line-height:1.52;word-break:break-word;white-space:pre-wrap}
  .rx-row{gap:6px;overflow-x:auto;padding-bottom:2px}
  .rx{min-width:42px;min-height:34px}
  #bottomNav{height:72px;padding-bottom:var(--safe-bottom)}
  .btab span{font-size:.68rem}
  .side-panel{top:0;width:100vw;max-width:100vw;height:100dvh;border-radius:0}
  .panel-r,.panel-l{width:100vw;max-width:100vw}
  .ph{padding:calc(var(--safe-top) + .9rem) 1rem .85rem}
  .nlist,.flist{height:calc(100dvh - 74px - var(--safe-top));overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nitem,.fl-item{padding:.85rem .9rem}
  #chatPanel{left:0;right:0;bottom:0;width:100vw;height:min(78dvh,640px);border-radius:22px 22px 0 0;border-left:0;border-right:0;z-index:650}
  .chat-messages{max-height:none;flex:1;overscroll-behavior:contain}
  .chat-input{padding-bottom:calc(.75rem + var(--safe-bottom))}
  .modal-bg{padding:10px;align-items:flex-end}
  .modal{width:100%;max-height:88dvh;border-radius:22px 22px 0 0;padding:1rem;overflow-y:auto}
  /* Floater en movil: ocupa ancho disponible, oculto fuera de pantalla por la derecha */
  #floater{left:10px;right:10px;top:calc(var(--safe-top) + 74px);width:auto;max-width:none}
  /* Botones de accion: scroll horizontal para no romper layout */
  .abar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .abar::-webkit-scrollbar{display:none}
  .abtn{flex-shrink:0;font-size:.7rem;padding:.3rem .5rem}
  /* Rx menu en movil: position fixed, JS controla top/left exactos */
  .rx-menu{
    position:fixed !important;
    bottom:auto !important;
    left:0 !important;
    transform:scale(.86) !important;
    transform-origin:left bottom !important;
    z-index:9999 !important;
    max-width:calc(100vw - 20px) !important;
    transition:opacity .16s ease, visibility .16s ease, transform .2s cubic-bezier(.175,.885,.32,1.275) !important;
  }
  /* Desactivar hover en móvil: solo toggle por JS */
  .rxrow:hover .rx-menu,
  .rxrow:focus-within .rx-menu{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:scale(.86) !important;
  }
  .rxrow.rx-open .rx-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:scale(1) !important;
  }
}

/* Telefonos medianos (iPhone 14/15, Galaxy S): 375-430px */
@media (max-width: 430px){
  .nav-logo{font-size:.9rem}
  .nav-brand img{width:24px!important;height:24px!important}
  .nav-name{max-width:65px;font-size:.74rem}
  .composer{padding:.78rem}
  .av-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .glass{width:calc(100vw - 20px);padding:1.1rem;border-radius:22px}
  .auth-wrap{padding:calc(var(--safe-top) + 14px) 10px calc(var(--safe-bottom) + 14px)}
  .cpill,.fbtn,.sbtn{font-size:.75rem;padding:.45rem .65rem}
  .ccard{padding:.82rem}
  .ctxt{font-size:.93rem;white-space:pre-wrap}
  .match-avs{gap:.6rem}
  .pstats{gap:5px}
  .pstat-n{font-size:1.1rem}
  .share-grid{grid-template-columns:repeat(2,1fr)}
}

/* Telefonos pequeños: 320-374px */
@media (max-width: 374px){
  :root{--r-xl:18px;--r-lg:14px;--r-md:12px}
  .nav-logo{font-size:.82rem}
  .nav-brand img{width:22px!important;height:22px!important}
  .nav-name{max-width:52px;font-size:.72rem}
  .nav-code,.nav-level{display:none}
  .notif-ico{width:36px;height:36px}
  #app{padding-top:calc(var(--safe-top) + 72px)}
  .container{padding:0 8px}
  .composer{padding:.7rem;border-radius:16px}
  .comp-av{width:34px;height:34px;font-size:1.3rem}
  #confTxt{min-height:94px;font-size:15px}
  .av-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .av-opt{font-size:1.4rem}
  .glass{width:calc(100vw - 16px);padding:.9rem;border-radius:18px}
  .auth-wrap{padding:calc(var(--safe-top) + 10px) 8px calc(var(--safe-bottom) + 10px)}
  .cpill,.fbtn,.sbtn{font-size:.72rem;padding:.4rem .55rem}
  .ccard{padding:.72rem;border-radius:16px}
  .ctxt{font-size:.88rem;white-space:pre-wrap}
  .btab span{font-size:.62rem}
  .btab .bico{width:20px;height:20px}
  .btn-submit span:first-child{font-size:.84rem}
  .pstats{grid-template-columns:repeat(3,1fr);gap:4px}
  .pstat{padding:.5rem .3rem}
  .pstat-n{font-size:1rem}
  .pstat-l{font-size:.58rem}
  .share-grid{grid-template-columns:repeat(2,1fr);gap:5px}
  .match-avs{gap:.4rem}
  .abar{gap:2px}
  .abtn{padding:.28rem .42rem;font-size:.68rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* ===== AVATAR IMAGE INPUT ===== */
.av-img-hint{
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--r-sm);padding:.55rem .75rem;
  font-size:.7rem;color:var(--t2);line-height:1.5;
}
.av-img-hint b{color:var(--t1)}
.av-img-hint code{
  background:var(--accent-dim);color:var(--accent);
  border-radius:4px;padding:.05rem .35rem;font-size:.68rem;
}
.av-img-hint i{color:var(--t3)}
.av-url-input{
  flex:1;font-size:.78rem!important;
  padding:.5rem .75rem!important;
}
.add-friend-btn{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--accent-dim);border:1px solid var(--accent);
  color:var(--accent);border-radius:50px;
  font-size:.6rem;padding:.15rem .45rem;
  cursor:pointer;margin-left:6px;
  vertical-align:middle;
  transition:background .15s,transform .15s;
  font-weight:600;letter-spacing:.2px;
}
.add-friend-btn:hover{background:var(--accent);color:#fff;transform:scale(1.05)}
.add-friend-btn:active{transform:scale(.95)}

/* Friends panel search input */
#fpanel_search .finput{
  background:var(--bg3);border:1px solid var(--border2);
  color:var(--t1);border-radius:var(--r-sm);
  padding:.55rem .8rem;font-size:.82rem;width:100%;
}
#searchResults .nempty{padding:1.2rem;text-align:center;font-size:.82rem;color:var(--t3)}

/* Group member count badge in chat header */
.chat-header-status.group-status{
  color:var(--accent);font-size:.65rem;font-weight:600;
}
/* Solicitudes badge on tab button */
#ftab_req{position:relative}
#reqBadge:empty{display:none!important}
/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE INVITACIONES
   ═══════════════════════════════════════════════════════════════ */

/* Botón de invitaciones en el nav */
#inviteDot { position:absolute; top:3px; right:3px; width:9px; height:9px; background:var(--accent); border-radius:50%; border:2px solid var(--bg); display:none; }

/* Hero contador */
.inv-hero {
  background: linear-gradient(135deg, rgba(124,111,255,.12), rgba(124,111,255,.04));
  border: 1px solid rgba(124,111,255,.2);
  border-radius: var(--r-lg);
  padding: 1.1rem 1rem;
  margin: .9rem 1rem;
  text-align: center;
}
.inv-hero-count { display:flex; align-items:baseline; justify-content:center; gap:6px; }
.inv-hero-count span { font-family:Syne,sans-serif; font-size:2.8rem; font-weight:800; color:var(--accent); line-height:1; }
.inv-hero-count small { font-size:.72rem; color:var(--t2); font-weight:500; }
.inv-hero-label { font-size:.74rem; color:var(--t2); margin:.35rem 0 .7rem; line-height:1.4; }
.inv-progress-wrap { margin-top:.4rem; }
.inv-progress-bar { height:5px; background:var(--bg3); border-radius:999px; overflow:hidden; }
.inv-progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),#a78bfa); border-radius:999px; transition:width .6s cubic-bezier(.34,1.56,.64,1); }
.inv-progress-lbl { font-size:.65rem; color:var(--t3); margin-top:.35rem; }

/* Link de invitación */
.inv-link-section { padding:0 1rem .8rem; }
.inv-link-label { font-size:.58rem; font-weight:700; letter-spacing:.1em; color:var(--t3); margin-bottom:.4rem; text-transform:uppercase; }
.inv-link-box { display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-sm); padding:.45rem .65rem; }
.inv-link-url { flex:1; font-size:.65rem; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:monospace; }
.inv-copy-btn { flex-shrink:0; background:var(--accent); color:#fff; border:none; border-radius:7px; padding:.28rem .6rem; font-size:.68rem; font-weight:600; cursor:pointer; font-family:inherit; transition:opacity .15s; }
.inv-copy-btn:hover { opacity:.85; }
.inv-share-row { display:flex; gap:7px; margin-top:.55rem; }
.inv-share-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:var(--r-sm); padding:.5rem; font-size:.72rem; font-weight:600; cursor:pointer; font-family:inherit; transition:opacity .15s,transform .1s; }
.inv-share-btn:active { transform:scale(.96); }
.inv-wa { background:#25D366; color:#fff; }
.inv-cp { background:var(--bg3); color:var(--t1); border:1px solid var(--border); }

/* Tabs del panel */
.inv-tabs { display:flex; gap:4px; padding:0 1rem .7rem; }

/* Títulos de sección */
.inv-section-title { font-size:.58rem; font-weight:700; letter-spacing:.1em; color:var(--t3); padding:.2rem 1rem .45rem; text-transform:uppercase; }

/* Grid de marcos */
.inv-frames-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 1rem; }
.inv-frame-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:.7rem .55rem;
  display:flex; flex-direction:column; align-items:center;
  gap:5px; position:relative; transition:transform .15s,border-color .2s,background .2s;
}
.inv-frame-card.inv-unlocked { cursor:pointer; border-color:rgba(124,111,255,.25); }
.inv-frame-card.inv-unlocked:hover { transform:translateY(-2px); background:var(--bg3); }
.inv-frame-card.inv-active { border-color:var(--accent); background:rgba(124,111,255,.07); }
.inv-frame-card.inv-locked { opacity:.55; }
.inv-frame-preview {
  width:50px; height:50px; border-radius:50%;
  background:var(--bg3); border:none;
  display:flex; align-items:center; justify-content:center;
  transition:filter .3s;
  position:relative; overflow:visible;
  outline:2px solid var(--border); outline-offset:0;
}
.inv-frame-card.inv-unlocked .inv-frame-preview { outline:none; }
.inv-frame-card.inv-locked .inv-frame-preview { outline:2px solid var(--border); filter:grayscale(1); }
.inv-frame-info { text-align:center; }
.inv-frame-name { font-size:.7rem; font-weight:700; color:var(--t1); line-height:1.2; }
.inv-frame-req { font-size:.6rem; color:var(--t3); margin-top:2px; }
.inv-frame-badge {
  position:absolute; top:5px; right:5px;
  background:var(--accent); color:#fff;
  font-size:.5rem; font-weight:700; letter-spacing:.05em;
  padding:2px 5px; border-radius:5px;
}

/* Lista invitados */
.inv-list { padding:0 1rem; display:flex; flex-direction:column; gap:5px; max-height:260px; overflow-y:auto; }
.inv-person {
  display:flex; align-items:center; gap:9px;
  padding:.45rem .55rem; background:var(--bg2);
  border-radius:var(--r-sm); border:1px solid var(--border);
}
.inv-person-info { flex:1; min-width:0; }
.inv-person-name { font-size:.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-person-date { font-size:.62rem; color:var(--t3); margin-top:1px; }
.inv-person-tag { font-size:.68rem; color:var(--green); font-weight:700; flex-shrink:0; }

/* Top invitadores */
.top-inv-row {
  display:flex; align-items:center; gap:9px;
  padding:.6rem .55rem; background:var(--bg2);
  border-radius:var(--r-sm); border:1px solid var(--border);
  margin-bottom:5px;
}
.top-inv-row.top-inv-me { background:rgba(124,111,255,.07); border-color:rgba(124,111,255,.28); }
.top-inv-rank { font-size:1.15rem; width:26px; text-align:center; flex-shrink:0; }
.top-inv-info { flex:1; min-width:0; }
.top-inv-name { font-size:.8rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.top-inv-frame { font-size:.62rem; color:var(--t3); margin-top:1px; }
.top-inv-count {
  font-family:Syne,sans-serif; font-size:1.05rem;
  font-weight:800; color:var(--accent);
  text-align:right; flex-shrink:0;
  display:flex; flex-direction:column; align-items:flex-end;
}
.top-inv-count small { font-size:.56rem; font-weight:500; color:var(--t3); font-family:'DM Sans',sans-serif; line-height:1; }

/* Transición del marco en el nav */
#navAv { position: relative; overflow: visible; transform: translateZ(0); }

@keyframes frameUnlock {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.3) rotate(-6deg); }
  70%  { transform:scale(.93) rotate(3deg); }
  100% { transform:scale(1); }
}
.inv-frame-card.inv-unlocked.just-unlocked .inv-frame-preview {
  animation:frameUnlock .5s cubic-bezier(.34,1.56,.64,1);
}
/* ═══════════════════════════════════════════════════════════════
   MARCOS DE AVATAR — EFECTOS ANIMADOS
   ═══════════════════════════════════════════════════════════════ */

/* ── Neón verde ────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   MARCOS — técnica ::before (anillo animado)
   Solo anima opacity/transform → GPU en todos los móviles.
   El elemento base necesita position:relative y overflow:visible.
   ═══════════════════════════════════════════════════════════════ */

/* Base compartida del anillo */
.frame-neon-green::before,
.frame-neon-orange::before,
.frame-tornasol::before,
.frame-tornasol-gold::before,
.frame-galactico::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── Neón verde ──────────────────────────────────────────────── */
@keyframes ng-pulse {
  0%,100% { opacity: 1;  box-shadow: 0 0 0 3px #22c55e, 0 0 10px 2px #22c55e99, 0 0 22px 4px #22c55e55; }
  50%      { opacity: .85; box-shadow: 0 0 0 3px #4ade80, 0 0 16px 4px #4ade80cc, 0 0 36px 6px #4ade8077; }
}
.frame-neon-green {
  border-radius: 50% !important;
  position: relative;
  overflow: visible !important;
  transform: translateZ(0);
}
.frame-neon-green::before {
  animation: ng-pulse 1.8s ease-in-out infinite;
  will-change: opacity, box-shadow;
}

/* ── Neón naranja ───────────────────────────────────────────── */
@keyframes no-pulse {
  0%,100% { opacity: 1;   box-shadow: 0 0 0 3px #f97316, 0 0 10px 2px #f9731699, 0 0 22px 4px #f9731655; }
  50%      { opacity: .85; box-shadow: 0 0 0 3px #fb923c, 0 0 16px 4px #fb923ccc, 0 0 36px 6px #fb923c77; }
}
.frame-neon-orange {
  border-radius: 50% !important;
  position: relative;
  overflow: visible !important;
  transform: translateZ(0);
}
.frame-neon-orange::before {
  animation: no-pulse 1.6s ease-in-out infinite;
  will-change: opacity, box-shadow;
}

/* ── Tornasol (morado → azul → cyan) ───────────────────────── */
@keyframes ts-rotate {
  0%   { box-shadow: 0 0 0 3px #7c3aed, 0 0 12px 3px #7c3aed88; }
  25%  { box-shadow: 0 0 0 3px #2563eb, 0 0 12px 3px #2563eb88; }
  50%  { box-shadow: 0 0 0 3px #06b6d4, 0 0 12px 3px #06b6d488; }
  75%  { box-shadow: 0 0 0 3px #ec4899, 0 0 12px 3px #ec489988; }
  100% { box-shadow: 0 0 0 3px #7c3aed, 0 0 12px 3px #7c3aed88; }
}
.frame-tornasol {
  border-radius: 50% !important;
  position: relative;
  overflow: visible !important;
  transform: translateZ(0);
}
.frame-tornasol::before {
  animation: ts-rotate 3s linear infinite;
  will-change: box-shadow;
}

/* ── Tornasol dorado (gold → red → amber) ──────────────────── */
@keyframes tg-rotate {
  0%   { box-shadow: 0 0 0 3px #f59e0b, 0 0 14px 4px #f59e0b99, 0 0 28px 6px #f59e0b44; }
  33%  { box-shadow: 0 0 0 3px #ef4444, 0 0 14px 4px #ef444499, 0 0 28px 6px #ef444444; }
  66%  { box-shadow: 0 0 0 3px #fbbf24, 0 0 14px 4px #fbbf2499, 0 0 28px 6px #fbbf2444; }
  100% { box-shadow: 0 0 0 3px #f59e0b, 0 0 14px 4px #f59e0b99, 0 0 28px 6px #f59e0b44; }
}
.frame-tornasol-gold {
  border-radius: 50% !important;
  position: relative;
  overflow: visible !important;
  transform: translateZ(0);
}
.frame-tornasol-gold::before {
  animation: tg-rotate 2.5s linear infinite;
  will-change: box-shadow;
}

/* ── Galáctico ──────────────────────────────────────────────── */
@keyframes gc-spin {
  0%   { box-shadow: 0 0 0 3px #a855f7, 0 0 12px 3px #a855f7aa, 0 0 28px 6px #6366f155; }
  20%  { box-shadow: 0 0 0 3px #818cf8, 0 0 12px 3px #818cf8aa, 0 0 28px 6px #a855f755; }
  40%  { box-shadow: 0 0 0 3px #ec4899, 0 0 12px 3px #ec4899aa, 0 0 28px 6px #f43f5e55; }
  60%  { box-shadow: 0 0 0 3px #06b6d4, 0 0 12px 3px #06b6d4aa, 0 0 28px 6px #818cf855; }
  80%  { box-shadow: 0 0 0 3px #6366f1, 0 0 12px 3px #6366f1aa, 0 0 28px 6px #a855f755; }
  100% { box-shadow: 0 0 0 3px #a855f7, 0 0 12px 3px #a855f7aa, 0 0 28px 6px #6366f155; }
}
@keyframes gc-scale {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.frame-galactico {
  border-radius: 50% !important;
  position: relative;
  overflow: visible !important;
  transform: translateZ(0);
}
.frame-galactico::before {
  animation: gc-spin 4s linear infinite;
  will-change: box-shadow;
}
.frame-galactico {
  animation: gc-scale 4s ease-in-out infinite;
}

/* Preview en el panel de marcos — mismo tamaño que navAv ──── */
.inv-frame-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* ── Marco personalizado (imagen subida por el usuario) ─────── */
@keyframes cf-pulse {
  0%,100% { opacity: 1;  box-shadow: 0 0 0 3px rgba(167,139,250,.9), 0 0 10px 2px rgba(167,139,250,.5); }
  50%      { opacity: .85; box-shadow: 0 0 0 3px rgba(196,181,253,.9), 0 0 16px 4px rgba(196,181,253,.6); }
}
.frame-custom {
  border-radius: 50% !important;
  position: relative;
  overflow: visible !important;
  transform: translateZ(0);
}
.frame-custom::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background-image: var(--custom-frame-url, none);
  background-size: cover;
  background-position: center;
  animation: cf-pulse 2s ease-in-out infinite;
}
.frame-custom::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: rgba(0,0,0,.18);
}