/* ===== NOCTEBOOK · Sidebar Neon (reemplaza a sidebar-pro.css) ===== */
@property --c{syntax:'<color>';inherits:true;initial-value:#00e5ff}

/* Panel: cristal oscuro con aurora lenta */
.side{
  background:
    radial-gradient(260px 200px at 10% 0%,rgba(0,229,255,.16),transparent 70%),
    radial-gradient(240px 220px at 100% 55%,rgba(179,136,255,.13),transparent 70%),
    linear-gradient(180deg,#0a101c,#0f1626 60%,#0a101c);
  background-size:200% 200%,200% 200%,100% 100%;
  animation:nnAurora 16s ease-in-out infinite alternate;
  scrollbar-width:thin;scrollbar-color:rgba(0,229,255,.35) transparent;
}
@keyframes nnAurora{from{background-position:0% 0%,100% 100%,0 0}to{background-position:60% 40%,30% 60%,0 0}}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:rgba(0,229,255,.35);border-radius:6px}
.logo img{filter:drop-shadow(0 0 8px rgba(0,229,255,.7));animation:nnFloat 4.5s ease-in-out infinite}
.logo b{color:#00e5ff;text-shadow:0 0 14px rgba(0,229,255,.7)}
@keyframes nnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Colores neón: cada sección tiene el suyo */
#nav .nav{--c:#00e5ff}
#nav .nav:nth-of-type(8n+2){--c:#b388ff}
#nav .nav:nth-of-type(8n+3){--c:#ff4dd8}
#nav .nav:nth-of-type(8n+4){--c:#39ff88}
#nav .nav:nth-of-type(8n+5){--c:#ffb020}
#nav .nav:nth-of-type(8n+6){--c:#4d9bff}
#nav .nav:nth-of-type(8n+7){--c:#ff5d6c}
#nav .nav:nth-of-type(8n+8){--c:#c6ff3d}

/* Contenedor del menú */
#nav{position:relative;gap:4px}
@media (min-width:961px){#nav{display:flex;flex-direction:column}}

/* Indicador deslizante: se mueve hasta donde marcas */
.nav-ind{
  position:absolute;left:0;right:0;top:0;height:44px;z-index:0;pointer-events:none;opacity:0;
  border-radius:13px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 24%,transparent),color-mix(in srgb,var(--c) 5%,transparent));
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 0 22px -4px color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 16px color-mix(in srgb,var(--c) 14%,transparent);
  transition:transform .5s cubic-bezier(.34,1.35,.4,1),height .5s cubic-bezier(.34,1.35,.4,1),--c .45s ease,opacity .25s ease;
}
.nav-ind::before{
  content:"";position:absolute;left:-1px;top:20%;bottom:20%;width:3px;border-radius:0 4px 4px 0;
  background:var(--c);box-shadow:0 0 14px 1px var(--c);
}

/* Botones */
#nav .nav{
  position:relative;z-index:1;overflow:hidden;isolation:isolate;
  padding:7px 10px;border-radius:13px;color:#8d9bb8;font-size:14px;
  background:transparent!important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),color .2s ease;
}
#nav .nav::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);
  transition:opacity .25s ease;
}
#nav .nav:hover{color:#fff;transform:translateX(3px)}
#nav .nav:hover::after{opacity:1}
#nav .nav:active{transform:translateX(3px) scale(.98)}
#nav .nav:focus-visible{outline:2px solid var(--c);outline-offset:-2px}

/* Icono dentro de una "ficha" luminosa */
#nav .nav>span:first-child{
  display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;font-size:17px;
  background:color-mix(in srgb,var(--c) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent);
  transition:transform .3s cubic-bezier(.3,1.6,.5,1),background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
#nav .nav:hover>span:first-child{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent)}

/* Activo: texto brillante, ficha encendida */
#nav .nav.on{color:#fff;font-weight:600;text-shadow:0 0 14px color-mix(in srgb,var(--c) 70%,transparent);box-shadow:none!important}
#nav .nav.on>span:first-child{
  background:color-mix(in srgb,var(--c) 30%,transparent);
  border-color:color-mix(in srgb,var(--c) 75%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--c) 65%,transparent),inset 0 0 8px color-mix(in srgb,var(--c) 30%,transparent);
}

/* Contadores */
#nav .nav em{
  min-width:26px;text-align:center;font-weight:600;font-size:11px;
  background:color-mix(in srgb,var(--c) 14%,transparent);
  color:color-mix(in srgb,var(--c) 70%,#fff);
  border:1px solid color-mix(in srgb,var(--c) 28%,transparent);
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;
}
#nav .nav:hover em{transform:scale(1.08)}
#nav .nav.on em{background:var(--c);color:#06121a;border-color:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent)}

/* Entrada escalonada (una sola vez al cargar) */
#nav.nav-in .nav{animation:nnIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes nnIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

/* Menú colapsado: solo iconos (gana a las reglas de arriba por especificidad) */
body.collapsed #nav .nav{font-size:0;gap:0;justify-content:center;padding:7px 0}
body.collapsed #nav .nav em{display:none}
body.collapsed #nav .nav>span:first-child{font-size:18px}
body.collapsed #nav .nav.on{text-shadow:none}

/* Colapsado y móvil */
body.collapsed #nav .nav:hover,body.collapsed #nav .nav:active{transform:none}
@media (max-width:960px){
  .nav-ind{display:none}
  #nav .nav.on{background:color-mix(in srgb,var(--c) 20%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent)!important}
}

/* Tema claro: neón más contenido */
:root[data-theme=light] .side{background:linear-gradient(180deg,#fff,#f1f4fb);animation:none}
:root[data-theme=light] #nav .nav{color:#4b5873}
:root[data-theme=light] #nav .nav:hover,:root[data-theme=light] #nav .nav.on{color:#0d1424;text-shadow:none}
:root[data-theme=light] .nav-ind{box-shadow:0 4px 14px -6px color-mix(in srgb,var(--c) 70%,transparent)}
:root[data-theme=light] #nav .nav.on em{color:#fff}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce){
  .side,.logo img,#nav .nav,.nav-ind,#nav.nav-in .nav{animation:none!important;transition:none!important}
}