/* ============================================================
   index.css — estilos compartidos de toda la web PokeRift 2
   ============================================================ */
:root{
  --bg:#08070e;--bg-2:#0d0b16;--surface:#15131f;--surface-2:#1b1828;--surface-3:#221f31;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.13);
  --text:#f4f3f8;--muted:#8d8aa0;--muted-2:#b9b6c9;
  --gold:#ffd23f;--gold-deep:#f0b429;--purple:#a855f7;--purple-deep:#7c3aed;
  --twitch:#9146ff;--youtube:#e1101a;--red:#e1101a;--green:#37c871;
  --radius:18px;--radius-sm:12px;--sidebar:264px;--topbar-h:60px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --font-display:'Chakra Petch',sans-serif;--font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.1;letter-spacing:.2px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:rgba(255,210,63,.3)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.hidden{display:none!important}

/* ---------------- SHELL (sidebar + main) ---------------- */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.main-col{display:flex;flex-direction:column;min-width:0;position:relative}
.main-col::before{content:"";position:fixed;inset:0 0 0 var(--sidebar);z-index:0;pointer-events:none;
  background:radial-gradient(800px 480px at 70% -10%, rgba(124,58,237,.14), transparent 60%)}
main{position:relative;z-index:1;max-width:920px;width:100%;margin:0 auto;padding:26px 28px 70px}
section{margin-top:34px}

/* ---------------- SIDEBAR ---------------- */
.sidebar{background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px}
.s-brand{display:flex;align-items:center;gap:11px;padding:18px 18px;border-bottom:1px solid var(--border)}
.s-brand .chip{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,#ff5a36,#ffd23f);box-shadow:0 8px 22px -8px rgba(255,90,54,.8)}
.s-brand .chip svg{width:23px;height:23px}
.s-brand .t b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.5px;display:block}
.s-brand .t span{font-size:10px;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.s-rank{margin:14px 16px 4px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
  background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.3);font-size:12.5px;font-weight:600;color:#7fd0ff}
.s-rank svg{width:14px;height:14px}
.nav{padding:8px 10px 24px}
.nav-group{margin-top:8px}
.nav-group>.gh{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;
  color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:12px 12px 6px}
.nav-group>.gh .arrow{transition:transform .2s}
.nav-group.collapsed>.gh .arrow{transform:rotate(-90deg)}
.nav-group .items{display:flex;flex-direction:column;gap:2px;overflow:hidden;transition:max-height .25s ease}
.nav-group.collapsed .items{max-height:0!important}
.nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--muted-2);
  font-size:14px;font-weight:500;transition:.14s;position:relative}
.nav-link:hover{background:var(--surface);color:var(--text)}
.nav-link svg{width:18px;height:18px;flex:none;color:var(--muted)}
.nav-link.active{background:linear-gradient(90deg,rgba(255,210,63,.16),rgba(255,210,63,.03));color:var(--gold);
  box-shadow:inset 2px 0 0 var(--gold)}
.nav-link.active svg{color:var(--gold)}
.nav-link .dot{position:absolute;right:12px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}

/* ---------------- TOPBAR ---------------- */
.topbar{height:var(--topbar-h);position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:0 22px;background:rgba(8,7,14,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.hamb{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);place-items:center}
.hamb svg{width:20px;height:20px}
.tb-spacer{flex:1}
.coins{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700;color:var(--gold)}
.coins svg{width:16px;height:16px}
.tb-user{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:999px;padding:5px 12px 5px 6px}
.tb-user .av{overflow:hidden;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#7c3aed,#a855f7);
  font-size:12px;font-weight:700;color:#fff}
.tb-user .nm{font-size:13px;font-weight:600}
.rank-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.4px;
  border:1px solid currentColor;display:inline-flex;align-items:center;gap:5px}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;color:var(--muted-2);transition:.15s;position:relative}
.iconbtn:hover{color:var(--text);border-color:var(--border-strong)}
.iconbtn svg{width:18px;height:18px}
.iconbtn .count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.online{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-2);font-weight:500}
.online .led{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

/* ---- Dropdowns compartidos (notificaciones + amigos) ---- */
.tb-panel-wrap{position:relative}
.tb-dropdown{position:absolute;right:0;top:46px;width:360px;max-width:90vw;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:16px;box-shadow:0 20px 60px -10px rgba(0,0,0,.7);overflow:hidden;display:none;z-index:40}
.tb-dropdown.open{display:flex;flex-direction:column;transform-origin:top right;animation:notifPop .26s cubic-bezier(.2,.9,.25,1.15)}
.dp-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.dp-head h4{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text);margin:0}
.dp-badge{font-size:11px;font-weight:600;color:var(--green);background:rgba(55,200,113,.12);border:1px solid rgba(55,200,113,.25);border-radius:20px;padding:2px 10px;margin-left:auto}
.dp-list{max-height:380px;overflow-y:auto;overscroll-behavior:contain}
.panel-empty{padding:32px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}
.av-ini{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-3);color:var(--muted-2);font-weight:700;font-family:var(--font-display);flex-shrink:0}

/* ---- Notificaciones mejoradas ---- */
.ni{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border);transition:background .15s;cursor:default}
.ni:hover{background:var(--surface-2)}
.ni.read{opacity:.55}
.ni-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid transparent}
.ni-icon svg{width:16px;height:16px}
.ni-body{flex:1;min-width:0}
.ni-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.35}
.ni-text{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ni-meta{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11px;color:var(--muted)}
.ni-action{color:var(--gold);font-weight:600;text-decoration:none;font-size:11px}
.ni-action:hover{text-decoration:underline}

/* ---- Panel de amigos ---- */
.friends-panel{width:340px}
.fr-row{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.fr-row:hover{background:var(--surface-2)}
.fr-av{position:relative;flex-shrink:0}
.fr-online-dot{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--surface);box-shadow:0 0 6px var(--green)}
.fr-info{flex:1;min-width:0}
.fr-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-status{display:flex;align-items:center;gap:5px;font-size:11.5px;margin-top:2px}
.fr-status.on{color:var(--green)}
.fr-status.off{color:var(--muted)}
.fr-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.fr-dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}
.fr-dot.off{background:var(--muted)}
.fr-msg-btn{position:relative;width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--muted-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.fr-msg-btn:hover{color:var(--gold);border-color:var(--gold);background:rgba(255,210,63,.08)}
.fr-msg-btn svg{width:16px;height:16px}
.fr-unread{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---- Chat privado (dentro del panel amigos) ---- */
.chat-head-dm{gap:10px}
.dm-back{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;flex-shrink:0}
.dm-back:hover{color:var(--text);border-color:var(--border-strong)}
.dm-back svg{width:16px;height:16px}
.dm-who{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dm-who-av{position:relative;flex-shrink:0}
.dm-who-info{display:flex;flex-direction:column;min-width:0}
.dm-who-info b{font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-status{font-size:11px;display:flex;align-items:center;gap:4px;margin-top:1px}
.dm-status.on{color:var(--green)}
.dm-status.off{color:var(--muted)}
.dm-body{flex:1;min-height:240px;max-height:320px;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;background:rgba(0,0,0,.15)}
.dm-empty{display:flex;align-items:center;justify-content:center;min-height:200px}

/* Grupo de mensajes (mismo emisor consecutivo) */
.dm-group{display:flex;gap:8px;align-items:flex-end}
.dm-group.mine{flex-direction:row;justify-content:flex-start}
.dm-group.theirs{flex-direction:row;justify-content:flex-end}
.dm-av{flex-shrink:0;align-self:flex-end;margin-bottom:18px}
.dm-av img,.dm-av .av-ini{width:30px;height:30px;border-radius:50%;display:block}
.dm-msgs{display:flex;flex-direction:column;gap:3px;max-width:75%;min-width:0}

/* Burbujas */
.dm-bubble{padding:9px 14px;border-radius:16px;font-size:13px;line-height:1.5;word-break:break-word;animation:dmIn .2s ease}
@keyframes dmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Mis mensajes (izquierda): fondo dorado cálido */
.dm-group.mine .dm-bubble{background:linear-gradient(135deg,rgba(255,210,63,.22),rgba(240,180,41,.13));color:var(--text);border:1px solid rgba(255,210,63,.15)}
.dm-first-mine{border-bottom-left-radius:6px!important}
.dm-mid-mine{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important}
.dm-last-mine{border-top-left-radius:6px!important}

/* Sus mensajes (derecha): fondo púrpura sutil */
.dm-group.theirs .dm-bubble{background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(124,58,237,.06));color:var(--text);border:1px solid rgba(124,58,237,.15)}
.dm-first-theirs{border-bottom-right-radius:6px!important}
.dm-mid-theirs{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important}
.dm-last-theirs{border-top-right-radius:6px!important}

/* Timestamp */
.dm-time{font-size:10px;color:var(--muted);padding:1px 6px 0}
.dm-group.mine .dm-time{text-align:left}
.dm-group.theirs .dm-time{text-align:right}

/* Input */
.dm-input{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border);align-items:center}
.dm-input input{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 14px;
  color:var(--text);font-size:13px;font-family:var(--font-body);outline:none;transition:border-color .15s}
.dm-input input:focus{border-color:var(--gold)}
.dm-send{width:34px;height:34px;border-radius:10px;background:var(--gold);color:var(--bg);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:filter .12s;flex-shrink:0}
.dm-send:hover{filter:brightness(1.1)}
.dm-send svg{width:16px;height:16px}

/* ---------------- CARDS / GENERIC ---------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px}
.page-title{font-size:clamp(22px,4vw,30px);font-weight:700}
.page-sub{color:var(--muted);font-size:14px;margin:6px 0 0}

/* ---------------- HERO ---------------- */
.hero{position:relative;border-radius:var(--radius);padding:40px 30px 32px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(124,58,237,.16),rgba(21,19,31,.6) 42%,var(--surface));border:1px solid var(--border-strong)}
.hero::after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,63,.32),transparent 70%);filter:blur(8px);animation:pulse 5s ease-in-out infinite}
.hero>*{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,210,63,.45);border-radius:999px;
  padding:7px 16px;font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase;
  margin-bottom:22px;background:rgba(255,210,63,.06)}
.eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.hero .hi{color:var(--muted-2);font-weight:600;font-size:clamp(26px,4vw,40px)}
.hero .title{font-size:clamp(46px,8vw,76px);font-weight:700;letter-spacing:1px;margin:2px 0 18px;
  background:linear-gradient(180deg,#fff 8%,#ffe28f 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 44px rgba(255,210,63,.4)}
.hero p{color:var(--muted-2);font-size:15px;max-width:52ch;margin:0 auto 26px}
.hero p b{color:var(--text)}
.stats{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.stat .v{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,3vw,26px);color:var(--gold)}
.stat .l{font-size:10px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;margin-top:3px}

/* ---------------- FORM ---------------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px}
.sec-head h2{font-size:clamp(20px,3.4vw,26px);font-weight:700;display:flex;align-items:center;gap:10px}
.sec-head h2 svg{width:22px;height:22px;color:var(--gold)}
.sec-sub{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.form-field{margin-bottom:18px}
.form-field>label{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;margin-bottom:7px}
.req{color:var(--gold)}.opt{color:var(--muted);font-weight:400;font-size:12.5px}
.hint{color:var(--muted);font-size:12px;margin-top:7px}
.input{width:100%;background:var(--bg);border:1px solid var(--border-strong);color:var(--text);border-radius:11px;
  padding:12px 14px;font-size:14.5px;transition:border-color .15s, background .15s}
.input::placeholder{color:#6f6c82}
.input:focus{outline:none;border-color:var(--gold);background:#100e18}
.socials .input{margin-bottom:9px}
.addmore{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px dashed var(--border-strong);
  color:var(--muted-2);border-radius:10px;padding:9px 13px;font-size:13px;font-weight:500;transition:.15s}
.addmore:hover{color:var(--text);border-color:var(--gold)}.addmore svg{width:14px;height:14px}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238d8aa0' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
textarea.input{min-height:96px;resize:vertical}
.primary{border:none;border-radius:12px;padding:13px 18px;font-weight:700;font-size:15px;color:#1a1405;
  background:linear-gradient(180deg,#ffdf6a,var(--gold-deep));box-shadow:0 12px 30px -12px rgba(255,210,63,.8);transition:transform .12s,filter .2s}
.primary:hover{transform:translateY(-1px);filter:brightness(1.04)}
.primary:disabled{opacity:.6;cursor:wait}
.primary.block{width:100%}
.ghost{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);border-radius:12px;padding:12px 18px;font-weight:600;font-size:14px}
.ghost:hover{border-color:var(--gold)}
.toast{margin-top:14px;padding:13px 15px;border-radius:12px;font-size:13.5px;display:none}
.toast.show{display:block;animation:fade .3s ease}
.toast.ok{background:rgba(46,160,87,.12);border:1px solid rgba(46,160,87,.5);color:#7ee2a0}
.toast.err{background:rgba(225,16,26,.12);border:1px solid rgba(225,16,26,.5);color:#ff8a8a}

/* ---------------- ACCORDION (¿Qué incluye?) ---------------- */
.acc{display:grid;gap:10px}
@media(min-width:620px){.acc{grid-template-columns:1fr 1fr}}
.item{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .15s}
.item:hover{border-color:var(--border-strong)}.item.open{border-color:rgba(255,210,63,.4)}
.item>button{width:100%;display:flex;align-items:center;gap:13px;background:none;border:none;color:var(--text);padding:15px 16px;text-align:left}
.ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border)}.ic svg{width:19px;height:19px}
.item .tt{flex:1;min-width:0}
.item .tt b{font-family:var(--font-display);font-weight:600;font-size:14.5px;display:block;color:var(--gold)}
.item .tt small{color:var(--muted);font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item.open .tt small{white-space:normal}
.chev{flex:none;color:var(--muted);transition:transform .25s}.item.open .chev{transform:rotate(180deg)}
.body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.body p{margin:0;padding:0 16px 16px 67px;color:var(--muted-2);font-size:13.5px}

/* ---------------- RANKS ---------------- */
.rank-grid{display:grid;gap:12px}
@media(min-width:620px){.rank-grid{grid-template-columns:1fr 1fr}}
.rank-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:14px;padding:16px 18px}
.rank-card .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rank-card .nm{font-family:var(--font-display);font-weight:700;font-size:16px}
.rank-card .lv{font-size:11px;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 9px}
.perms{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.perm{font-size:11px;padding:4px 9px;border-radius:999px;background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.3);color:var(--gold)}
.perm.off{display:none}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 4px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-2);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 11px;cursor:pointer}
.check input{accent-color:var(--gold);width:16px;height:16px}

/* ---------------- PROFILE ---------------- */
.profile-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.profile-head .big-av{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;font-size:28px;font-weight:700;color:#fff;background:linear-gradient(150deg,#7c3aed,#a855f7)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin-top:6px}
.kv .k{color:var(--muted);font-size:13px}.kv .v{font-size:13.5px;font-weight:500}

/* ---------------- PLACEHOLDER ---------------- */
.soon{display:grid;place-items:center;min-height:50vh;text-align:center}
.soon .badge{width:70px;height:70px;border-radius:20px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border-strong);margin:0 auto 18px}
.soon .badge svg{width:32px;height:32px;color:var(--gold)}
.soon h1{font-size:26px}.soon p{color:var(--muted);margin-top:8px;max-width:42ch}

/* ---------------- LOGIN (página propia) ---------------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(800px 600px at 50% -5%, rgba(124,58,237,.28), transparent 60%),radial-gradient(600px 480px at 80% 110%, rgba(255,210,63,.12), transparent 55%),var(--bg)}
.auth-card{width:100%;max-width:404px;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--border-strong);border-radius:24px;padding:34px 28px 30px;box-shadow:var(--shadow)}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:24px}
.mark{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(150deg,#ff5a36,#ffd23f);box-shadow:0 14px 36px -10px rgba(255,90,54,.7)}
.mark svg{width:34px;height:34px}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:26px;background:linear-gradient(180deg,#fff,#ffe49a 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 26px rgba(255,210,63,.35)}
.auth-sub{color:var(--muted);font-size:13.5px;text-align:center;margin-top:-6px}
.gwrap{display:flex;justify-content:center;min-height:44px}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:18px 0;text-transform:uppercase;letter-spacing:1px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border-strong)}
.field{margin-bottom:14px}.field label{display:block;font-size:12.5px;color:var(--muted-2);margin-bottom:6px;font-weight:500}
.auth-switch{text-align:center;color:var(--muted);font-size:13px;margin-top:18px}
.auth-switch button{background:none;border:none;color:var(--gold);font-weight:600;font-size:13px;padding:0}

.follow{display:grid;gap:11px}
.follow a{display:flex;align-items:center;gap:14px;border-radius:14px;padding:14px 16px;border:1px solid var(--border-strong);background:var(--surface);transition:transform .12s, border-color .15s}
.follow a:hover{transform:translateY(-1px)}
.follow .pic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none}.follow .pic svg{width:21px;height:21px;color:#fff}
.tw .pic{background:rgba(145,70,255,.16)}.tw:hover{border-color:var(--twitch)}.tw .pic svg{color:var(--twitch)}
.yt .pic{background:rgba(225,16,26,.14)}.yt:hover{border-color:var(--youtube)}.yt .pic svg{color:#ff5a5a}
.ig:hover{border-color:#e1306c}
.follow .txt{flex:1}.follow .txt b{font-size:14px;display:block}.follow .txt small{color:var(--muted);font-size:12.5px}
.follow .go{color:var(--muted)}
.news{border:1px solid var(--border-strong);border-radius:14px;padding:18px;background:linear-gradient(180deg,rgba(255,210,63,.07),var(--surface))}
.news .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gold);margin-bottom:6px}.news .tag svg{width:16px;height:16px}
.news p{margin:0;color:var(--muted-2);font-size:13.5px}

@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:var(--sidebar);z-index:60;transform:translateX(-100%);transition:transform .25s}
  .shell.open .sidebar{transform:none}
  .main-col::before{inset:0}
  .hamb{display:grid}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;display:none}
  .shell.open .backdrop{display:block}
  main{padding:20px 16px 64px}
  .online,.coins{display:none}
}

/* ---------------- LOGROS ---------------- */
.logro-cat{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.logro-cat .lft{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px}
.logro-cat .cdot{width:11px;height:11px;border-radius:50%}
.logro-cat .cnt{font-size:13px;color:var(--muted);font-weight:600}
.logro-grid{display:grid;gap:11px}
@media(min-width:620px){.logro-grid{grid-template-columns:1fr 1fr}}
.logro-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 15px;display:flex;gap:12px;position:relative;transition:border-color .15s}
.logro-card .lk{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.logro-card .lk svg{width:17px;height:17px}
.logro-card .info{flex:1;min-width:0}
.logro-card .nm{font-weight:700;font-size:14px}
.logro-card .ds{color:var(--muted);font-size:12.5px;margin:2px 0 9px;line-height:1.4}
.logro-card .pend{font-size:11.5px;color:var(--muted);font-style:italic}
.prog{display:flex;align-items:center;gap:9px}
.prog .track{flex:1;height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.prog .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#ff5a36,var(--gold));transition:width .4s}
.prog .pc{font-size:11px;font-weight:700;color:var(--gold);min-width:30px;text-align:right}
.prog .num{font-size:11px;color:var(--muted);min-width:42px}
.logro-card.done{border-color:rgba(255,210,63,.45);background:linear-gradient(180deg,rgba(255,210,63,.08),var(--surface))}
.logro-card.done .lk{background:rgba(255,210,63,.16);border-color:rgba(255,210,63,.4);color:var(--gold)}
.logro-card.done .nm{color:var(--gold)}

/* ---------------- AMIGOS ---------------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:2px}
.tab{background:none;border:none;color:var(--muted-2);font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:10px 10px 0 0;position:relative}
.tab:hover{color:var(--text)}
.tab.active{color:var(--gold)}
.tab.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-3px;height:2px;background:var(--gold);border-radius:2px}
.tab .pill{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--surface-3);font-size:11px;color:var(--text)}
.tab.active .pill{background:var(--gold);color:#1a1405}
.search-row{display:flex;gap:9px;margin-bottom:14px}
.search-row .input{flex:1}
.frow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:9px}
.frow .av{ overflow: hidden;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(150deg,#7c3aed,#a855f7);flex:none}
.frow .who{flex:1;min-width:0}
.frow .who b{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .acts{display:flex;gap:7px;flex:none}
.btn-sm{border:none;border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer}
.btn-add{background:linear-gradient(180deg,#ffdf6a,var(--gold-deep));color:#1a1405}
.btn-ok{background:rgba(55,200,113,.16);border:1px solid rgba(55,200,113,.5);color:#7ee2a0}
.btn-no{background:rgba(225,16,26,.12);border:1px solid rgba(225,16,26,.45);color:#ff8a8a}
.btn-mut{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--muted);cursor:default}
.empty-box{text-align:center;color:var(--muted);font-size:13.5px;padding:34px 16px;border:1px dashed var(--border-strong);border-radius:14px}

/* ---------------- FONDO ELEMENTAL (home + PokeRift 2) ---------------- */
/* Se activa poniendo  class="elemental"  en el body de la página.
   No tapa el contenido: queda detrás de todo, muy sutil. */
body.elemental .main-col::before{
  content:none; /* desactivamos el degradado morado de las demás páginas */
}
body.elemental{position:relative;overflow-x:hidden}
body.elemental::before,
body.elemental::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
}
/* Capa 1: gradiente elemental animado (verde → naranja → azul → verde) */
body.elemental::before{
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(91,225,160,.18), transparent 60%),
    radial-gradient(800px 560px at 82% 32%, rgba(255,122,60,.16),  transparent 60%),
    radial-gradient(900px 640px at 50% 92%, rgba(56,189,248,.18),  transparent 60%);
  animation: elemShift 30s ease-in-out infinite;
  filter:blur(2px);
}
/* Capa 2: motas/burbujas que flotan despacio (SVG en línea) */
body.elemental::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='800'><g fill='%23ffffff' opacity='.045'><circle cx='80'  cy='120' r='3'/><circle cx='220' cy='60'  r='2'/><circle cx='360' cy='180' r='2.5'/><circle cx='520' cy='90'  r='2'/><circle cx='680' cy='220' r='3'/><circle cx='840' cy='140' r='2'/><circle cx='120' cy='340' r='2'/><circle cx='300' cy='420' r='3'/><circle cx='480' cy='360' r='2'/><circle cx='620' cy='480' r='2.5'/><circle cx='780' cy='400' r='2'/><circle cx='920' cy='520' r='3'/><circle cx='60'  cy='620' r='2'/><circle cx='240' cy='680' r='2.5'/><circle cx='420' cy='600' r='2'/><circle cx='600' cy='720' r='3'/><circle cx='780' cy='660' r='2'/><circle cx='940' cy='740' r='2.5'/></g></svg>");
  background-size:1000px 800px;
  animation: elemFloat 50s linear infinite;
  mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent);
}
/* Para que el contenido siempre quede por encima del fondo */
body.elemental .shell{position:relative;z-index:1}

@keyframes elemShift{
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%; filter:blur(2px) hue-rotate(0deg); }
  33%  { filter:blur(2px) hue-rotate(8deg); }
  66%  { filter:blur(2px) hue-rotate(-8deg); }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%; filter:blur(2px) hue-rotate(0deg); }
}
@keyframes elemFloat{
  0%   { background-position:   0px    0px; }
  100% { background-position: -1000px -800px; }
}

/* Tres bandas elementales finas en el lateral, opcional */
body.elemental .shell::before{
  content:"";position:fixed;left:0;top:0;bottom:0;width:3px;z-index:5;
  background:linear-gradient(180deg, #5be1a0 0 33%, #ff7a3c 33% 66%, #38bdf8 66% 100%);
  opacity:.55;
}

@media (prefers-reduced-motion: reduce){
  body.elemental::before, body.elemental::after{ animation:none !important; }
}

/* ============================================================
   COMUNIDAD + PANEL ADMIN + REDES EN PERFIL  (añadido)
   ============================================================ */

/* ---------- Avatar mini compartido (chat, listas, podio) ---------- */
.cav{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:none;display:block;background:var(--surface-3)}
.cav-ini{display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px;
  background:linear-gradient(150deg,#7c3aed,#a855f7)}

/* ---------- Redes sociales en el perfil ---------- */
.profile-social{margin-top:14px}
.profile-social .bio{margin:0 0 12px;color:var(--muted-2);font-size:14.5px;white-space:pre-wrap;word-break:break-word}
.social-row{display:flex;flex-wrap:wrap;gap:9px}
.social-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);
  font-size:13px;font-weight:600;transition:border-color .15s,transform .15s}
.social-chip svg{width:16px;height:16px}
.social-chip:hover{transform:translateY(-1px);border-color:var(--gold)}
.social-chip.ig:hover{border-color:#e1306c}
.social-chip.ig svg{color:#e1306c}

/* ============================================================
   COMUNIDAD
   ============================================================ */
.com-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.com-title{display:flex;align-items:center;gap:14px}
.com-ico{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;color:var(--gold);
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,210,63,.22),rgba(255,210,63,.05));
  border:1px solid rgba(255,210,63,.35);box-shadow:0 10px 26px -12px rgba(255,210,63,.5)}
.com-ico svg{width:26px;height:26px}

/* Buscador */
.com-search{position:relative;flex:1;min-width:240px;max-width:420px}
.com-search>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.com-search input{width:100%;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);
  border-radius:12px;padding:12px 14px 12px 42px;font-size:14px}
.com-search input::placeholder{color:#6f6c82}
.com-search input:focus{outline:none;border-color:var(--gold);background:#100e18}
.com-search-res,.com-search .res-wrap{display:none}
.com-search .com-search-res{display:none}
#comBuscarRes{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;display:none;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:14px;padding:8px;
  box-shadow:var(--shadow);max-height:340px;overflow-y:auto}
#comBuscarRes.open{display:block}
.res-h{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.res-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13.5px}
.res-row:hover{background:var(--surface-3)}
.res-row>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-tag{font-size:11px;color:var(--muted);background:var(--surface-3);border-radius:8px;padding:2px 8px;flex:none}
.res-empty{padding:16px;text-align:center;color:var(--muted);font-size:13px}

/* ---------- Chat ---------- */
.chat-card{display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface-2),transparent)}
.chat-h-left{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:17px}
.chat-h-left svg{width:20px;height:20px;color:var(--gold)}
.chat-live{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-2);font-weight:600}
.chat-live .led{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(55,200,113,.6);animation:pulseLed 1.8s infinite}
@keyframes pulseLed{0%{box-shadow:0 0 0 0 rgba(55,200,113,.55)}70%{box-shadow:0 0 0 7px rgba(55,200,113,0)}100%{box-shadow:0 0 0 0 rgba(55,200,113,0)}}

.chat-body{height:360px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.chat-body::-webkit-scrollbar{width:9px}
.chat-body::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px}
.chat-loading,.chat-empty{margin:auto;color:var(--muted);font-size:13.5px;text-align:center}
.chat-msg{display:flex;gap:11px;align-items:flex-start}
.chat-msg-body{min-width:0;flex:1}
.chat-msg-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.chat-msg-meta>b{font-size:13.5px;color:var(--gold)}
.cb-rank{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:7px;border:1px solid;line-height:1.4}
.chat-time{font-size:11.5px;color:var(--muted)}
.chat-del{margin-left:auto;background:none;border:none;color:var(--muted);font-size:13px;line-height:1;padding:2px 6px;border-radius:6px;opacity:0;transition:opacity .15s}
.chat-msg:hover .chat-del{opacity:1}
.chat-del:hover{color:var(--red);background:rgba(225,16,26,.12)}
.chat-bubble{display:inline-block;background:var(--surface-3);border:1px solid var(--border);color:var(--text);
  padding:10px 14px;border-radius:4px 14px 14px 14px;font-size:14px;max-width:100%;word-break:break-word;white-space:pre-wrap}

.chat-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--border);position:relative;background:var(--surface)}
.chat-input input{flex:1;background:var(--bg);border:1px solid var(--border-strong);color:var(--text);border-radius:12px;padding:12px 14px;font-size:14px}
.chat-input input::placeholder{color:#6f6c82}
.chat-input input:focus{outline:none;border-color:var(--gold);background:#100e18}
.chat-send{width:46px;height:46px;flex:none;border:none;border-radius:12px;display:grid;place-items:center;color:#1a1405;
  background:linear-gradient(180deg,#ffdf6a,var(--gold-deep))}
.chat-send svg{width:19px;height:19px}
.chat-send:hover{filter:brightness(1.05)}
.chat-send:disabled{opacity:.5;cursor:not-allowed}
.chat-count{position:absolute;right:18px;bottom:-18px;font-size:11px;color:var(--muted)}

/* ---------- Pestañas comunidad / admin ---------- */
.com-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 18px}
.com-tab{background:var(--surface);border:1px solid var(--border-strong);color:var(--muted-2);
  font-size:13.5px;font-weight:600;padding:10px 15px;border-radius:11px;display:inline-flex;align-items:center;gap:7px;
  transition:all .15s}
.com-tab svg{width:15px;height:15px}
.com-tab:hover{color:var(--text);border-color:var(--border-strong)}
.com-tab.active{color:#1a1405;background:linear-gradient(180deg,#ffdf6a,var(--gold-deep));border-color:transparent;font-weight:700}

/* ---------- Grid 2 columnas + tarjetas panel ---------- */
.com-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel-card{padding:0;overflow:hidden}
.pc-head{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--border)}
.pc-head svg{width:20px;height:20px;flex:none}
.pc-head h2{font-size:17px;font-weight:700}
.pc-head small{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:2px}
.pc-head.red{background:linear-gradient(90deg,rgba(225,16,26,.14),transparent)}
.pc-head.red svg{color:var(--red)}
.pc-head.green{background:linear-gradient(90deg,rgba(55,200,113,.14),transparent)}
.pc-head.green svg{color:var(--green)}
.pc-head.gold{background:linear-gradient(90deg,rgba(255,210,63,.14),transparent)}
.pc-head.gold svg{color:var(--gold)}
.pc-head.blue{background:linear-gradient(90deg,rgba(56,189,248,.14),transparent)}
.pc-head.blue svg{color:#38bdf8}
.pc-head.purple{background:linear-gradient(90deg,rgba(168,85,247,.14),transparent)}
.pc-head.purple svg{color:var(--purple)}
.pc-head.calendar{background:linear-gradient(90deg,rgba(255,122,60,.14),transparent)}
.pc-head.calendar svg{color:#ff7a3c}
.pc-body{padding:18px}

/* ---------- Actividad (stats + tu participación) ---------- */
.act-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.act-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center}
.act-stat .ai{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin:0 auto 9px}
.act-stat .ai svg{width:17px;height:17px}
.act-stat .ai.gold{background:rgba(255,210,63,.16);color:var(--gold)}
.act-stat .ai.blue{background:rgba(56,189,248,.16);color:#38bdf8}
.act-stat .ai.purple{background:rgba(168,85,247,.16);color:var(--purple)}
.act-stat b{display:block;font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1}
.act-stat .ai.gold~b{color:var(--gold)}
.act-stat small{display:block;color:var(--muted);font-size:11.5px;margin-top:5px}
.act-mine{margin-top:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:16px}
.am-title{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--muted);margin-bottom:12px}
.am-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:6px 0}
.am-row+.am-row{border-top:1px solid var(--border)}
.am-row>span{display:inline-flex;align-items:center;gap:8px;color:var(--muted-2)}
.am-row svg{width:15px;height:15px}
.am-row .gold svg{color:var(--gold)}
.am-row .blue svg{color:#38bdf8}
.am-row b{font-family:var(--font-display)}

/* ---------- Matches ---------- */
.vs-empty{text-align:center;color:var(--muted);padding:40px 16px}
.vs-empty svg{width:40px;height:40px;opacity:.4;margin-bottom:12px}
.vs-empty p{margin:0;font-size:13.5px}
.match-card{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;padding:14px;margin-bottom:10px}
.match-side{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font-size:13.5px;font-weight:600}
.match-side span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-side.right{justify-content:flex-end;text-align:right}
.match-vs{flex:none;text-align:center;font-family:var(--font-display);font-weight:700;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:4px;align-items:center}
.m-live{color:var(--red);font-size:11px;font-weight:700}
.m-soon{color:var(--muted);font-size:11px;font-weight:600;background:var(--surface-3);padding:2px 8px;border-radius:8px}

/* ---------- Podio ---------- */
.podio-tabs{display:flex;gap:7px;flex-wrap:wrap;padding:14px 18px 0}
.podio-tab{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--muted-2);
  font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:10px;display:inline-flex;align-items:center;gap:6px}
.podio-tab svg{width:13px;height:13px}
.podio-tab:hover{color:var(--text)}
.podio-tab.active{color:var(--red);border-color:rgba(225,16,26,.5);background:rgba(225,16,26,.1)}
.podio-label{font-size:12.5px;color:var(--red);background:rgba(225,16,26,.08);border:1px solid rgba(225,16,26,.3);
  border-radius:10px;padding:10px 14px;margin-bottom:14px;font-weight:600}
.podio-list{display:flex;flex-direction:column;gap:8px}
.podio-row,.rank-row{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:11px 14px}
.podio-pos{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:13px;background:var(--surface-3);color:var(--muted-2)}
.podio-pos.pos1{background:linear-gradient(150deg,#ffd23f,#f0b429);color:#1a1405}
.podio-pos.pos2{background:linear-gradient(150deg,#d7d7e0,#a9a9bd);color:#1a1405}
.podio-pos.pos3{background:linear-gradient(150deg,#e6a86b,#c17e3f);color:#1a1405}
.podio-nm{flex:1;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podio-val{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:15px}
.podio-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:34px 16px}

/* ---------- Rankings (votar) ---------- */
.rank-list{display:flex;flex-direction:column;gap:9px}
.rank-info{flex:1;min-width:0}
.rank-info b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-info small{color:var(--muted);font-size:12px}

/* ---------- Predicciones ---------- */
.pred-card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:15px;margin-bottom:12px}
.pred-vs{font-weight:600;font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pred-vs small{color:var(--muted);font-weight:500}
.pred-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pred-opt{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border-strong);
  color:var(--text);border-radius:12px;padding:11px 13px;font-size:13.5px;font-weight:600;text-align:left;transition:all .15s}
.pred-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pred-opt:hover{border-color:var(--gold)}
.pred-opt.sel{border-color:var(--gold);background:rgba(255,210,63,.12);color:var(--gold)}
.pred-ok{margin-top:11px;font-size:12.5px;color:var(--green);font-weight:600}

/* ---------- Eventos / feed actividad ---------- */
.ev-row,.feed-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.ev-row+.ev-row,.feed-row+.feed-row{border-top:1px solid var(--border)}
.ev-row>div,.feed-row>div{flex:1;min-width:0}
.ev-row b,.feed-row b{font-size:14px;display:block}
.ev-row small,.feed-row small{color:var(--muted);font-size:12px}
.ev-row p,.feed-row p{margin:4px 0 0;font-size:13px;color:var(--muted-2);word-break:break-word}
.ev-dot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:5px;background:var(--muted)}
.ev-dot.general{background:var(--muted-2)}
.ev-dot.torneo{background:var(--gold)}
.ev-dot.directo{background:var(--red)}
.ev-dot.sorteo{background:var(--purple)}

/* ============================================================
   PANEL ADMIN
   ============================================================ */
.admin-resumen{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:22px 0 6px}
.res-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center}
.res-card b{display:block;font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--gold);line-height:1}
.res-card small{display:block;color:var(--muted);font-size:12px;margin-top:6px}

.adm-list{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.adm-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;flex-wrap:wrap}
.adm-who{flex:1;min-width:150px}
.adm-who b{display:block;font-size:14px}
.adm-who small{color:var(--muted);font-size:12px}
.adm-rango{width:auto;min-width:120px;flex:none;padding:9px 11px}
.adm-monedas{width:90px;flex:none;padding:9px 11px}
.adm-self{color:var(--muted);padding:0 6px}

.adm-sub{font-family:var(--font-display);font-size:15px;font-weight:700;margin:22px 0 12px;color:var(--gold)}
.adm-form{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.ff{display:flex;flex-direction:column;gap:6px}
.ff>label{font-size:12.5px;font-weight:600;color:var(--muted-2)}
.ff textarea.input{resize:vertical}
.ff-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ff-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:780px){
  .com-grid{grid-template-columns:1fr}
  .admin-resumen{grid-template-columns:repeat(3,1fr)}
  .act-stats{grid-template-columns:repeat(3,1fr)}
  .com-search{max-width:none;width:100%}
  .com-head{flex-direction:column}
}
@media (max-width:520px){
  .admin-resumen{grid-template-columns:repeat(2,1fr)}
  .pred-opts{grid-template-columns:1fr}
  .ff-row,.ff-row3{grid-template-columns:1fr}
  .chat-body{height:300px}
  .adm-rango,.adm-monedas{width:100%;min-width:0}
}

/* ============================================================
   ANIMACIONES: campana / notificaciones / online  (añadido)
   ============================================================ */

/* --- Apertura del panel: "pop" desde la esquina de la campana --- */
@keyframes notifPop{
  0%  { opacity:0; transform:translateY(-8px) scale(.9) }
  60% { opacity:1; transform:translateY(0) scale(1.01) }
  100%{ opacity:1; transform:translateY(0) scale(1) }
}

/* --- Entrada escalonada de cada notificación --- */
.tb-dropdown.open .ni{ animation:notifItemIn .34s ease backwards }
.tb-dropdown.open .ni:nth-child(1){ animation-delay:.04s }
.tb-dropdown.open .ni:nth-child(2){ animation-delay:.09s }
.tb-dropdown.open .ni:nth-child(3){ animation-delay:.14s }
.tb-dropdown.open .ni:nth-child(4){ animation-delay:.19s }
.tb-dropdown.open .ni:nth-child(5){ animation-delay:.24s }
.tb-dropdown.open .ni:nth-child(n+6){ animation-delay:.28s }
.tb-dropdown.open .fr-row{ animation:notifItemIn .3s ease backwards }
.tb-dropdown.open .fr-row:nth-child(1){ animation-delay:.03s }
.tb-dropdown.open .fr-row:nth-child(2){ animation-delay:.07s }
.tb-dropdown.open .fr-row:nth-child(3){ animation-delay:.11s }
.tb-dropdown.open .fr-row:nth-child(4){ animation-delay:.15s }
.tb-dropdown.open .fr-row:nth-child(5){ animation-delay:.19s }
.tb-dropdown.open .fr-row:nth-child(n+6){ animation-delay:.22s }
@keyframes notifItemIn{
  from{ opacity:0; transform:translateX(10px) }
  to  { opacity:1; transform:translateX(0) }
}
/* --- Campana con notificaciones sin leer: balanceo suave y repetido --- */
#bell.has-unread svg{ transform-origin:50% 4px; animation:bellSwing 2.6s ease-in-out infinite }
@keyframes bellSwing{
  0%,55%,100%{ transform:rotate(0) }
  60%{ transform:rotate(13deg) }
  66%{ transform:rotate(-11deg) }
  72%{ transform:rotate(8deg) }
  78%{ transform:rotate(-5deg) }
  84%{ transform:rotate(2deg) }
}
#bell.has-unread{ color:var(--gold); border-color:rgba(255,210,63,.4) }
#friendsBtn.has-unread{ color:var(--gold); border-color:rgba(255,210,63,.4) }
#friendsBtn.has-unread svg{ animation:bellSwing 2.6s ease-in-out infinite }

/* --- Badge contador: "pop" al aparecer + latido suave --- */
.iconbtn .count{ animation:countPop .32s cubic-bezier(.2,.9,.25,1.4) }
#bell.has-unread .count{ animation:countPop .32s cubic-bezier(.2,.9,.25,1.4), countBeat 2.6s ease-in-out .4s infinite }
@keyframes countPop{
  0%{ transform:scale(0) }
  70%{ transform:scale(1.25) }
  100%{ transform:scale(1) }
}
@keyframes countBeat{
  0%,80%,100%{ transform:scale(1) }
  88%{ transform:scale(1.18) }
}

/* --- Indicador "online": LED con pulso + tic al cambiar el número --- */
.online .led{ position:relative; animation:onlineBreath 2.4s ease-in-out infinite }
@keyframes onlineBreath{
  0%,100%{ box-shadow:0 0 6px var(--green); opacity:.85 }
  50%    { box-shadow:0 0 11px var(--green); opacity:1 }
}
.online.bump #onlineN{ display:inline-block; animation:onlineBump .4s ease }
@keyframes onlineBump{
  0%{ transform:translateY(0) }
  40%{ transform:translateY(-3px); color:var(--green) }
  100%{ transform:translateY(0) }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  #bell.has-unread svg,
  .iconbtn .count,
  #bell.has-unread .count,
  .online .led,
  .tb-dropdown.open .ni,
  .tb-dropdown.open .fr-row{ animation:none !important }
}

/* ============================================================
   POKERIFT LIVE + HISTORIAL + PATROCINADORES  (añadido)
   ============================================================ */

/* Badge contador genérico (usado en cabeceras de panel) */
.pill{display:inline-block;font-size:12px;font-weight:700;color:var(--gold);background:rgba(255,210,63,.14);
  border:1px solid rgba(255,210,63,.3);border-radius:9px;padding:4px 11px}

/* ---------- Barra de estado del torneo ---------- */
.live-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:8px}
.live-state{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:14.5px}
.live-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:12.5px;
  letter-spacing:1px;padding:7px 13px;border-radius:10px;text-transform:uppercase}
.live-badge .dot{width:8px;height:8px;border-radius:50%}
.live-badge.off{background:var(--surface-3);color:var(--muted)}
.live-badge.off .dot{background:var(--muted)}
.live-badge.on{background:rgba(225,16,26,.14);color:#ff6a6a;border:1px solid rgba(225,16,26,.4)}
.live-badge.on .dot{background:var(--red);box-shadow:0 0 8px var(--red);animation:onlineBreath 1.6s ease-in-out infinite}
.live-chips{display:flex;gap:12px;flex-wrap:wrap}
.live-chip{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:13px;padding:10px 15px}
.live-chip .lc-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(124,58,237,.16);color:var(--purple)}
.live-chip .lc-ic svg{width:16px;height:16px}
.live-chip b{font-family:var(--font-display);font-size:18px;line-height:1}
.live-chip small{color:var(--muted);font-size:11.5px;display:block}
.live-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--green);font-weight:600}
.live-tag .led{width:7px;height:7px;border-radius:50%;background:var(--green);animation:onlineBreath 2s ease-in-out infinite}

/* ---------- En directo ahora ---------- */
.live-streams{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.live-stream{display:block;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;transition:transform .15s,border-color .15s}
.live-stream:hover{transform:translateY(-2px);border-color:var(--red)}
.ls-thumb{height:120px;background-size:cover;background-position:center;background-color:#0f0d18}
.ls-thumb-empty{display:grid;place-items:center}
.ls-thumb-empty .cav{width:54px;height:54px}
.ls-body{padding:12px 13px}
.ls-top{display:flex;align-items:center;gap:8px}
.ls-top .cav{width:26px;height:26px;border-radius:8px}
.ls-top b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-live{margin-left:auto;color:var(--red);font-size:10.5px;font-weight:700;flex:none}
.ls-title{margin:8px 0 6px;font-size:13px;color:var(--muted-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ls-meta{display:flex;gap:10px;font-size:11.5px;color:var(--muted)}

/* ---------- Grid 3 columnas (live) ---------- */
.live-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px;align-items:start}
.live-grid .chat-body{height:300px}

/* ---------- Feed actividad reciente ---------- */
.act-feed{display:flex;gap:11px;align-items:flex-start;padding:13px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--border);border-left:3px solid var(--purple);margin-bottom:10px}
.act-feed.legendario{border-left-color:var(--gold);background:rgba(255,210,63,.05)}
.act-feed.dificil{border-left-color:#38bdf8}
.act-feed.medio{border-left-color:var(--green)}
.act-feed .cav{width:34px;height:34px}
.af-line{font-size:13px;color:var(--muted-2)}
.af-line b{color:var(--gold)}
.af-trophy{color:var(--muted-2)}
.af-logro{font-weight:700;font-size:14.5px;margin:3px 0}
.af-leg{font-size:10px;font-weight:700;color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:1px 6px;vertical-align:middle}
.af-desc{font-size:12.5px;color:var(--muted);line-height:1.4}
.af-time{font-size:11px;color:var(--muted);margin-top:5px}

/* ---------- Top admiradores ---------- */
.adm-rank{display:flex;flex-direction:column;gap:9px}
.adm-rk-row{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:11px 14px}
.adm-rk-row .cav{width:38px;height:38px}
.adm-rk-info{flex:1;min-width:0}
.adm-rk-info b{font-size:14px}
.adm-rk-info small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.adm-rk-pts{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--gold)}
.adm-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:7px;margin-left:4px;white-space:nowrap}
.adm-tag.gold{color:var(--gold);background:rgba(255,210,63,.14)}
.adm-tag.purple{color:var(--purple);background:rgba(168,85,247,.16)}
.adm-tag.green{color:var(--green);background:rgba(55,200,113,.14)}

/* ============================================================
   HISTORIAL
   ============================================================ */
.hist-card{padding:0;overflow:hidden;margin-bottom:20px;max-width:760px}
.hist-banner{min-height:190px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:18px}
.hist-banner-bottom{display:flex;align-items:flex-end;justify-content:space-between;width:100%;gap:12px}
.hist-nombre{font-family:var(--font-display);font-weight:700;font-size:24px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hist-fechas{font-size:13px;color:#d8d5e6;margin-top:4px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hist-estado{font-size:12px;font-weight:700;padding:6px 12px;border-radius:9px;white-space:nowrap;flex:none}
.hist-estado.fin{background:rgba(55,200,113,.18);color:#5be1a0;border:1px solid rgba(55,200,113,.4)}
.hist-estado.activa{background:rgba(225,16,26,.18);color:#ff7a7a;border:1px solid rgba(225,16,26,.4)}
.hist-estado.proxima{background:var(--surface-3);color:var(--muted-2)}
.hist-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px 18px}
.hist-stat{text-align:center}
.hist-stat .hs-ic{font-size:18px;display:block;margin-bottom:4px}
.hist-stat b{display:block;font-family:var(--font-display);font-size:19px;line-height:1.2;word-break:break-word}
.hist-stat small{color:var(--muted);font-size:12px}
.hist-desc{padding:0 18px 6px;color:var(--muted-2);font-size:14px}
.hist-more{margin:6px 18px 18px;background:none;border:none;color:var(--gold);font-size:13.5px;font-weight:600;cursor:pointer;padding:0}
.hist-more:hover{text-decoration:underline}
.hist-detalles{padding:0 18px 18px;color:var(--muted-2);font-size:13.5px;line-height:1.6}

/* ============================================================
   PATROCINADORES
   ============================================================ */
.patro-sec{margin-top:24px}
.patro-sec-h{font-family:var(--font-display);font-size:15px;letter-spacing:1.5px;color:var(--gold);margin:0 0 14px;font-weight:700}
.patro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.patro-card{position:relative;max-width:520px}
.patro-card.destacado{border-color:rgba(255,210,63,.55);box-shadow:0 0 0 1px rgba(255,210,63,.25),0 18px 40px -22px rgba(255,210,63,.5)}
.patro-crown{position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#ffe49a,#f0b429);font-size:15px;box-shadow:0 6px 16px -6px rgba(255,210,63,.8)}
.patro-top{display:flex;align-items:center;gap:14px}
.patro-av{width:60px;height:60px;border-radius:14px;object-fit:cover;flex:none;background:var(--surface-3)}
.patro-ini{display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:22px;color:#fff;
  background:linear-gradient(150deg,#7c3aed,#a855f7)}
.patro-nombre{font-family:var(--font-display);font-weight:700;font-size:20px}
.patro-tag{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:#1a1405;
  background:linear-gradient(180deg,#ffdf6a,var(--gold-deep));padding:4px 11px;border-radius:8px}
.patro-desc{margin:16px 0;color:var(--muted-2);font-size:14px;line-height:1.55;border-top:1px solid var(--border);padding-top:14px}
.patro-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#ffdf6a,var(--gold-deep));
  color:#1a1405;font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:11px}
.patro-btn:hover{filter:brightness(1.05)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .live-grid{grid-template-columns:1fr 1fr}
  .live-grid .chat-card{grid-column:1 / -1}
}
@media (max-width:680px){
  .live-grid{grid-template-columns:1fr}
  .live-bar{flex-direction:column;align-items:flex-start}
  .hist-stats{grid-template-columns:repeat(2,1fr)}
  .hist-nombre{font-size:20px}
}

/* ===== Badges de rareza de cartas ===== */
.rar-badge{font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 8px;border-radius:6px;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.rar-badge.comun{background:rgba(150,160,180,.16);color:#b9c0cf;border:1px solid rgba(150,160,180,.3)}
.rar-badge.rara{background:rgba(78,160,255,.15);color:#4ea0ff;border:1px solid rgba(78,160,255,.4)}
.rar-badge.epica{background:rgba(192,124,255,.16);color:#c07cff;border:1px solid rgba(192,124,255,.4)}
.rar-badge.legendaria{background:rgba(255,194,74,.16);color:#ffc24a;border:1px solid rgba(255,194,74,.45)}