/* Menú lateral compartido por todas las páginas de sistema/ — usa las
   mismas variables de color (--bg, --surface, --border, --text, etc.) que
   cada página ya define en su propio :root, así que no define colores
   propios, solo la estructura. */

.sys-shell{ display:flex; align-items:stretch; min-height:100vh; }

.sys-sidebar{
  width:214px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 10px;
  position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
}
.sys-sidebar-logo{
  font-weight:700; font-size:15px; margin-bottom:22px; padding:4px 6px;
  display:flex; align-items:center; gap:9px; color:var(--text); text-decoration:none;
}
.sys-sidebar-logo img{ height:20px; width:auto; }
.sys-sidebar-logo span{ color:var(--text-muted); font-weight:500; }

.sys-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.sys-nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:var(--text-muted); text-decoration:none; font-size:14px; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.sys-nav-item .ico{
  display:flex; align-items:center; justify-content:center;
  width:17px; height:17px; flex-shrink:0;
}
.sys-nav-item .ico svg{ width:17px; height:17px; }
.sys-nav-item:hover{ background:var(--surface-2); color:var(--text); }
.sys-nav-item.active{ background:#0a84ff; color:#fff; }

.sys-sidebar-foot{ padding-top:14px; margin-top:10px; border-top:1px solid var(--border); }
.sys-sidebar-foot a{
  display:block; font-size:12.5px; color:var(--text-muted); text-decoration:none; padding:6px 6px;
}
.sys-sidebar-foot a:hover{ color:var(--text); }

.sys-main{ flex:1; min-width:0; padding:26px 32px 60px; }

@media (max-width:860px){
  .sys-shell{ flex-direction:column; min-height:0; }
  .sys-sidebar{
    width:100%; height:auto; position:static; flex-direction:row; align-items:center;
    padding:10px 12px; overflow-x:auto; gap:4px;
  }
  .sys-sidebar-logo{ margin-bottom:0; margin-right:6px; flex-shrink:0; }
  .sys-nav{ flex-direction:row; flex:none; }
  .sys-nav-item{ white-space:nowrap; padding:9px 12px; }
  .sys-sidebar-foot{ display:none; }
  .sys-main{ padding:16px; }
}