APP SHELL
══════════════════════════════════════ */
#app{display:none;min-height:100vh}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:200;
  transition:transform var(--transition)
}
.sidebar-brand{padding:26px 22px 18px;border-bottom:1px solid var(--border)}
.logo{font-family:'Bebas Neue';font-size:30px;letter-spacing:3px;color:var(--accent)}
.logo span{color:var(--accent2)}
.role-badge{
  display:inline-block;margin-top:5px;padding:3px 10px;border-radius:20px;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  background:rgba(var(--accent-rgb),.08);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.18)
}
.sidebar-nav{flex:1;padding:14px 10px;overflow-y:auto}
.nav-section{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);padding:12px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--muted2);font-size:13.5px;font-weight:500;
  transition:all var(--transition);margin-bottom:1px;user-select:none;position:relative
}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:rgba(var(--accent-rgb),.07);color:var(--accent)}
.nav-item .ni{font-size:17px;width:20px;text-align:center;flex-shrink:0}
.nav-badge{
  margin-left:auto;background:var(--danger);color:#fff;border-radius:20px;
  font-size:10px;font-weight:700;padding:2px 7px;min-width:18px;text-align:center
}
.sidebar-footer{padding:14px 10px 18px;border-top:1px solid var(--border)}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm)}
.u-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--accent);color:#000;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
  overflow:hidden;position:relative;
}
.u-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* ── PERFIL CARD ── */
.perfil-card{
  border-radius:20px;padding:28px 20px;text-align:center;position:relative;overflow:hidden;
  margin-bottom:20px;
}
/* Fondos */
.bg-carbono{background:linear-gradient(145deg,#0a0a0a,#1a1a1a);}
.bg-acero{background:linear-gradient(145deg,#1c1c2e,#2d2d44);}
.bg-neon-yellow{background:linear-gradient(145deg,#0d0d00,#1a1a00);}
.bg-neon-blue{background:linear-gradient(145deg,#000d1a,#001a33);}
.bg-llamas{background:linear-gradient(145deg,#1a0500,#2d0a00);}
.bg-espacio{background:linear-gradient(145deg,#000008,#050015);}
.bg-montanas{background:linear-gradient(145deg,#0a0d0a,#101810);}
.bg-industrial{background:linear-gradient(145deg,#0d0d0d,#1a1414);}
.bg-anime{background:linear-gradient(145deg,#0d001a,#1a0033);}
.bg-cyberpunk{background:linear-gradient(145deg,#0d0d00,#00001a);}

/* ── AVATAR WRAPPER (marcos + efectos) ── */
.av-wrap{position:relative;display:inline-block;margin-bottom:12px;}
.av-img{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:42px;position:relative;z-index:2;overflow:hidden;
  background:var(--accent);color:#000;
}
.av-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* MARCOS */
.marco-none .av-img{border:3px solid rgba(255,255,255,.1);}
.marco-basico .av-img{border:3px solid #888;}
.marco-fitness .av-img{border:3px solid #4caf50;box-shadow:0 0 12px rgba(76,175,80,.5);}
.marco-elite .av-img{border:3px solid #4a9eff;box-shadow:0 0 14px rgba(74,158,255,.55);}
.marco-gladiador .av-img{border:3px solid #c084fc;box-shadow:0 0 16px rgba(192,132,252,.6);}
.marco-legendario .av-img{border:3px solid var(--accent);box-shadow:0 0 20px rgba(232,255,0,.7);}
.marco-fundador .av-img{
  border:3px solid transparent;
  background-clip:padding-box;
  box-shadow:0 0 0 3px gold,0 0 24px rgba(255,215,0,.8);
}
/* marcos con gradiente animado */
.marco-elite-anim .av-img{
  border:3px solid transparent;
  position:relative;
}
.marco-elite-anim .av-img::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(#4a9eff,#c084fc,#4a9eff);
  z-index:-1;animation:spin-marco 3s linear infinite;
}
.marco-gladiador-anim .av-img{
  border:3px solid transparent;position:relative;
}
.marco-gladiador-anim .av-img::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(#c084fc,#e8ff00,#c084fc);
  z-index:-1;animation:spin-marco 2s linear infinite;
}
@keyframes spin-marco{to{transform:rotate(360deg)}}

/* EFECTOS */
.efecto-wrap{position:absolute;inset:0;border-radius:50%;pointer-events:none;overflow:visible;z-index:3;}

/* Llamas */
@keyframes flame-rise{0%{transform:translateY(0) scaleX(1);opacity:.9}50%{transform:translateY(-14px) scaleX(.8);opacity:.5}100%{transform:translateY(-24px) scaleX(.6);opacity:0}}
.efecto-llamas .efecto-wrap::before,.efecto-llamas .efecto-wrap::after{
  content:'🔥';position:absolute;font-size:18px;animation:flame-rise 1s ease-in-out infinite;
}
.efecto-llamas .efecto-wrap::before{bottom:-4px;left:8px;animation-delay:0s;}
.efecto-llamas .efecto-wrap::after{bottom:-4px;right:8px;animation-delay:.5s;}

/* Rayos */
@keyframes bolt-flash{0%,90%{opacity:0;transform:scale(.8)}95%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.8)}}
.efecto-rayos .efecto-wrap::before,.efecto-rayos .efecto-wrap::after{
  content:'⚡';position:absolute;font-size:16px;animation:bolt-flash .8s ease-in-out infinite;
}
.efecto-rayos .efecto-wrap::before{top:2px;left:-6px;animation-delay:0s;}
.efecto-rayos .efecto-wrap::after{top:2px;right:-6px;animation-delay:.4s;}

/* Nieve */
@keyframes snow-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(20px) rotate(180deg);opacity:0}}
.efecto-nieve .efecto-wrap::before,.efecto-nieve .efecto-wrap::after{
  content:'❄️';position:absolute;font-size:14px;animation:snow-fall 1.5s ease-in-out infinite;
}
.efecto-nieve .efecto-wrap::before{top:-8px;left:18px;animation-delay:0s;}
.efecto-nieve .efecto-wrap::after{top:-8px;right:18px;animation-delay:.7s;}

/* Energía azul */
@keyframes pulse-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.efecto-energia::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid #4a9eff;animation:pulse-ring 1.2s ease-out infinite;
  pointer-events:none;z-index:3;
}

/* Velocidad */
@keyframes speed-lines{0%{opacity:0;transform:scaleX(0)}50%{opacity:.7}100%{opacity:0;transform:scaleX(1.2)}}
.efecto-velocidad .efecto-wrap::before{
  content:'💨';position:absolute;font-size:18px;left:-12px;top:35px;
  animation:speed-lines .7s ease-in-out infinite;
}

/* Partículas */
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}
.efecto-particulas .efecto-wrap::before,.efecto-particulas .efecto-wrap::after{
  content:'✨';position:absolute;font-size:14px;animation:sparkle 1.5s ease-in-out infinite;
}
.efecto-particulas .efecto-wrap::before{top:-6px;left:6px;}
.efecto-particulas .efecto-wrap::after{bottom:-6px;right:6px;animation-delay:.75s;}

/* Nebulosa */
@keyframes nebula-glow{0%,100%{box-shadow:0 0 20px 6px rgba(138,43,226,.4)}50%{box-shadow:0 0 32px 12px rgba(75,0,130,.6)}}
.efecto-nebulosa .av-img{animation:nebula-glow 2s ease-in-out infinite;}

/* Corona */
.efecto-corona .efecto-wrap::before{
  content:'👑';position:absolute;font-size:20px;top:-18px;left:50%;transform:translateX(-50%);
  animation:sparkle 2s ease-in-out infinite;
}

/* Diamantes */
@keyframes diamond-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.efecto-diamantes .efecto-wrap::before,.efecto-diamantes .efecto-wrap::after{
  content:'💎';position:absolute;font-size:13px;animation:diamond-float 1.8s ease-in-out infinite;
}
.efecto-diamantes .efecto-wrap::before{top:0;left:-10px;animation-delay:0s;}
.efecto-diamantes .efecto-wrap::after{top:0;right:-10px;animation-delay:.9s;}

/* Meteoritos */
@keyframes meteor{0%{opacity:0;transform:translate(-20px,-20px) rotate(45deg)}100%{opacity:1;transform:translate(0,0) rotate(45deg)}}
.efecto-meteoritos .efecto-wrap::before{
  content:'☄️';position:absolute;font-size:16px;top:-10px;right:-4px;
  animation:meteor .6s ease-in-out infinite alternate;
}

/* Efecto fundador especial */
@keyframes founder-aura{
  0%,100%{box-shadow:0 0 16px 4px rgba(255,215,0,.5),0 0 32px 8px rgba(255,165,0,.3)}
  50%{box-shadow:0 0 24px 8px rgba(255,215,0,.8),0 0 48px 16px rgba(255,165,0,.5)}
}
.efecto-fundador .av-img{animation:founder-aura 2s ease-in-out infinite;}
.efecto-fundador .efecto-wrap::before{
  content:'✨';position:absolute;font-size:16px;top:-8px;left:50%;transform:translateX(-50%);
  animation:sparkle 1.5s ease-in-out infinite;
}

/* Tarjeta insignias */
.insignia-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:4px 10px;font-size:12px;
}
/* Selector items en editor */
.psel-item{
  cursor:pointer;border:2px solid var(--border2);border-radius:10px;padding:10px 8px;
  text-align:center;font-size:12px;transition:all .2s;
}
.psel-item:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);}
.psel-item.selected{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent);}
.psel-item.locked{opacity:.4;cursor:not-allowed;}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-logout{
  width:100%;padding:9px;background:transparent;border:1px solid var(--border);
  color:var(--muted2);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;
  font-size:12px;margin-top:8px;transition:all var(--transition)
}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}

/* ══════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════ */
.main-content{margin-left:var(--sidebar);min-height:100vh}
@media(min-width:901px){
  .main-content{padding-top:64px}
}
.page{display:none;padding:32px 36px;max-width:1280px;animation:pgIn .25s ease}
.page.active{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-header{margin-bottom:30px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px}
.ph-left .page-title{font-family:'Bebas Neue';font-size:44px;letter-spacing:2px;line-height:1;transition:color .3s}
.ph-left .page-title span{color:var(--accent)}
.ph-left .page-sub{color:var(--muted2);font-size:13px;margin-top:5px}
.ph-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{padding:9px 18px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:all var(--transition);display:inline-flex;align-items:center;gap:6px}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:6px}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:6px}
.btn-accent{background:var(--accent);color:#000}
.btn-accent:hover{box-shadow:0 4px 20px rgba(var(--accent-rgb),.35);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--muted2);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border2)}
.btn-danger{background:rgba(255,23,68,.1);color:#ff6b6b;border:1px solid rgba(255,23,68,.2)}
.btn-danger:hover{background:rgba(255,23,68,.18)}
.btn-success{background:rgba(0,230,118,.1);color:var(--success);border:1px solid rgba(0,230,118,.2)}
.btn-info{background:rgba(0,176,255,.1);color:var(--info);border:1px solid rgba(0,176,255,.2)}
.btn-warn{background:rgba(255,171,0,.1);color:var(--warn);border:1px solid rgba(255,171,0,.2)}

/* ══════════════════════════════════════