/* portal.css — shared sidebar + collapsible behaviour for portal pages */

html,body{margin:0;padding:0;min-height:100vh;background:#050505;overflow-x:hidden;max-width:100%;}

.portal{display:grid;grid-template-columns:260px 1fr;min-height:100vh;position:relative;transition:grid-template-columns .4s cubic-bezier(.25,1.1,.4,1);max-width:100%;}
.portal-sidebar{position:fixed;top:0;left:0;width:260px;height:100vh;background:#0a0a0b;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;padding:24px 0;z-index:60;transition:width .4s cubic-bezier(.25,1.1,.4,1);}
.portal-sidebar .sb-brand{padding:0 22px 22px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:16px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;transition:padding .3s ease,justify-content .3s ease;}
.portal-sidebar .sb-brand img{height:32px;max-width:100%;display:block;transition:height .3s ease;}
.portal-sidebar .sb-section{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:0 22px 10px;overflow:hidden;}
.portal-sidebar .sb-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;}
.portal-sidebar .sb-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:rgba(255,255,255,.65);font-size:.88rem;font-weight:500;letter-spacing:.005em;border:1px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease,gap .3s ease,padding .3s ease;white-space:nowrap;overflow:hidden;}
.portal-sidebar .sb-item:hover{background:rgba(255,255,255,.04);color:#fff;}
.portal-sidebar .sb-item.active{background:rgba(0,255,136,.08);color:var(--green-light);border-color:rgba(0,255,136,.18);}
.portal-sidebar .sb-item.active .sb-icon svg{stroke:var(--green-light);}
.portal-sidebar .sb-icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.portal-sidebar .sb-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;}
.portal-sidebar .sb-footer{margin-top:auto;padding:16px 22px 22px;border-top:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:space-between;gap:10px;transition:padding .3s ease,flex-direction .3s ease,gap .3s ease;}
.portal-sidebar .sb-home{font-size:.7rem;color:rgba(255,255,255,.4);text-decoration:none;transition:color .18s ease;white-space:nowrap;}
.portal-sidebar .sb-home:hover{color:var(--green);}
.portal-sidebar .sb-lang{display:inline-flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:2px;}
.portal-sidebar .sb-lang .lang-btn{background:transparent;border:none;color:rgba(255,255,255,.55);font-size:.68rem;font-weight:600;letter-spacing:.06em;padding:4px 10px;border-radius:4px;cursor:pointer;transition:background .18s ease,color .18s ease;}
.portal-sidebar .sb-lang .lang-btn.active{background:rgba(0,255,136,.12);color:var(--green-light);}

.portal-main{position:relative;min-width:0;grid-column:2 / 3;overflow-x:hidden;}
#particleCanvas{position:fixed;top:0;left:260px;width:calc(100vw - 260px);height:100vh;z-index:0;pointer-events:none;transition:left .4s cubic-bezier(.25,1.1,.4,1),width .4s cubic-bezier(.25,1.1,.4,1);}
.portal-main .page-body{position:relative;z-index:10;}
.portal-main .footer{position:relative;z-index:10;}

/* Sidebar toggle button */
.sb-toggle{position:absolute;top:22px;right:-14px;width:28px;height:28px;border-radius:50%;background:#0a0a0b;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.5);transition:color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;z-index:70;padding:0;}
.sb-toggle:hover{color:var(--green-light);border-color:rgba(0,255,136,.35);background:#111;box-shadow:0 0 0 3px rgba(0,255,136,.06);}
.sb-toggle:focus-visible{outline:none;color:var(--green-light);border-color:rgba(0,255,136,.5);}
.sb-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .4s cubic-bezier(.25,1.1,.4,1);}

/* Collapsed state — desktop only, triggered via html.sb-collapsed flag */
@media(min-width:981px){
  html.sb-collapsed .portal{grid-template-columns:72px 1fr;}
  html.sb-collapsed .portal-sidebar{width:72px;}
  html.sb-collapsed #particleCanvas{left:72px;width:calc(100vw - 72px);}
  html.sb-collapsed .portal-sidebar .sb-brand{display:none;}
  html.sb-collapsed .portal-sidebar .sb-section{display:none;}
  html.sb-collapsed .portal-sidebar .sb-item{justify-content:center;gap:0;padding:10px 0;}
  html.sb-collapsed .portal-sidebar .sb-item > span:not(.sb-icon){display:none;}
  html.sb-collapsed .portal-sidebar .sb-footer{flex-direction:column;padding:16px 8px 16px;gap:8px;align-items:center;justify-content:center;}
  html.sb-collapsed .portal-sidebar .sb-home{font-size:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;}
  html.sb-collapsed .portal-sidebar .sb-home::before{content:"\2190";font-size:.95rem;color:rgba(255,255,255,.5);}
  html.sb-collapsed .portal-sidebar .sb-home:hover::before{color:var(--green);}
  html.sb-collapsed .portal-sidebar .sb-lang{display:none;}
  html.sb-collapsed .sb-toggle svg{transform:rotate(180deg);}
}

/* Mobile: vertical icon-only sidebar on the left + tap to open drawer */
@media(max-width:980px){
  .portal{grid-template-columns:64px 1fr;}
  .portal-sidebar{padding:18px 0;width:64px;}
  /* Hide wordmark on icon-only mode (logo.png es horizontal y desborda los 64px) */
  .portal-sidebar .sb-brand{display:none;}
  .portal-sidebar .sb-section{display:none;}
  .portal-sidebar .sb-nav{padding:0 8px;gap:4px;}
  .portal-sidebar .sb-item{justify-content:center;gap:0;padding:10px 0;}
  .portal-sidebar .sb-item > span:not(.sb-icon){display:none;}
  .portal-sidebar .sb-footer{flex-direction:column;padding:14px 8px 14px;gap:8px;align-items:center;justify-content:center;}
  .portal-sidebar .sb-home{font-size:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;}
  .portal-sidebar .sb-home::before{content:"\2190";font-size:.95rem;color:rgba(255,255,255,.5);}
  .portal-sidebar .sb-home:hover::before{color:var(--green);}
  .portal-sidebar .sb-lang{display:none;}
  .sb-toggle{top:14px;right:-11px;width:22px;height:22px;}
  .sb-toggle svg{transform:rotate(180deg);width:11px;height:11px;}
  #particleCanvas{left:64px;width:calc(100vw - 64px);}

  /* Mobile drawer: tap toggle to overlay full-text sidebar sin reposicionar main */
  html.sb-mobile-open .portal-sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;z-index:80;border-right:1px solid rgba(255,255,255,.08);box-shadow:0 0 30px rgba(0,0,0,.5);padding:24px 0;}
  html.sb-mobile-open .portal-sidebar .sb-brand{display:flex;padding:0 22px 22px;justify-content:flex-start;}
  html.sb-mobile-open .portal-sidebar .sb-brand img{height:32px;}
  html.sb-mobile-open .portal-sidebar .sb-section{display:block;}
  html.sb-mobile-open .portal-sidebar .sb-nav{padding:0 12px;gap:2px;}
  html.sb-mobile-open .portal-sidebar .sb-item{justify-content:flex-start;gap:12px;padding:10px 12px;}
  html.sb-mobile-open .portal-sidebar .sb-item > span:not(.sb-icon){display:inline;}
  html.sb-mobile-open .portal-sidebar .sb-footer{flex-direction:row;padding:16px 22px 22px;gap:10px;align-items:center;justify-content:space-between;}
  html.sb-mobile-open .portal-sidebar .sb-home{font-size:.7rem;width:auto;height:auto;border-radius:0;}
  html.sb-mobile-open .portal-sidebar .sb-home::before{content:none;}
  html.sb-mobile-open .portal-sidebar .sb-lang{display:inline-flex;}
  html.sb-mobile-open .sb-toggle{right:-11px;}
  html.sb-mobile-open .sb-toggle svg{transform:none;}
  html.sb-mobile-open body::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:75;backdrop-filter:blur(2px);}
  html.sb-mobile-open{overflow:hidden;}
}
@media(max-width:520px){
  .portal{grid-template-columns:56px 1fr;}
  .portal-sidebar{width:56px;}
  #particleCanvas{left:56px;width:calc(100vw - 56px);}
}

@media(prefers-reduced-motion:reduce){
  .portal,#particleCanvas,.sb-toggle svg,.portal-sidebar,.portal-sidebar .sb-brand,.portal-sidebar .sb-brand img,.portal-sidebar .sb-item,.portal-sidebar .sb-footer{transition:none !important;}
  #particleCanvas{display:none;}
}