:root{
  --sb-w: 300px;
  --sb-c: 82px;

  /* Gris pro intermedio */
  --sb-bg: rgba(210, 218, 228, .92);
  --sb-bg2: rgba(194, 204, 216, .86);

  --sb-border: rgba(15, 23, 42, .14);
  --sb-shadow: 0 20px 55px rgba(2, 6, 23, .22);

  --sb-text: rgba(15, 23, 42, .92);
  --sb-muted: rgba(15, 23, 42, .62);

  --sb-accent: rgba(37, 99, 235, 1);
  --sb-active: rgba(37, 99, 235, .18);
  --sb-hover: rgba(37, 99, 235, .10);
  --sb-accent-border: rgba(37, 99, 235, .22);

  --sb-chip: rgba(16, 185, 129, .16);
  --sb-chip-border: rgba(16, 185, 129, .28);

  --sb-radius: 18px;
}

/* Sidebar fija */
#sidebar_siges_2026{
  position: fixed;
  top: 14px;
  left: 14px;
  height: calc(100vh - 28px);
  width: var(--sb-w);
  z-index: 1030;

  background: linear-gradient(180deg, #d2dae4, #c2ccd8); /* fallback opaco */
  background: linear-gradient(180deg, var(--sb-bg), var(--sb-bg2));
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width .18s ease;
}

#sidebar_siges_2026.collapsed{ width: var(--sb-c); }

/* Layout body */
body.has-sb-2026{
  padding-left: calc(var(--sb-w) + 28px) !important;
  transition: padding-left .18s ease;
  overflow-x: hidden;
}
body.has-sb-2026.sb-collapsed-2026{
  padding-left: calc(var(--sb-c) + 28px) !important;
}

/* Top */
#sidebar_siges_2026 .sb-top{
  padding: 16px 14px 12px;
  border-bottom: 1px solid rgba(15,23,42,.12);
  position: relative;
}

/* Brand row */
#sidebar_siges_2026 .brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Logo presente */
#sidebar_siges_2026 .brand-badge{
  width: 64px;
  height: 64px;
  border-radius: 18px;

  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.20), rgba(255,255,255,.55));
  border: 1px solid rgba(37,99,235,.26);

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow: 0 18px 28px rgba(2,6,23,.16);
  overflow:hidden;
  flex: 0 0 auto;
}
#sidebar_siges_2026 .brand-badge img{
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
}

#sidebar_siges_2026 .brand-text{ min-width:0; }
#sidebar_siges_2026 .title-main{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 1.25rem;
  color: var(--sb-text);
  line-height: 1.05;
}
#sidebar_siges_2026 .title-sub{
  font-size: .86rem;
  color: var(--sb-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toggle button */
#sidebar_siges_2026 .toggle-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 14px;

  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.82);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}
#sidebar_siges_2026 .toggle-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
}

/* Park chip */
#sidebar_siges_2026 .park-chip{
  margin-top: 12px;
  display: inline-flex;
  align-items:center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  background: var(--sb-chip);
  border: 1px solid var(--sb-chip-border);

  color: rgba(15,23,42,.86);
  font-size: .80rem;
  max-width: 100%;
}
#sidebar_siges_2026 .park-chip i{ color: rgba(16,185,129,.95); }
#sidebar_siges_2026 .park-chip span{
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display:inline-block;
}

/* Nav scroll */
#sidebar_siges_2026 .sidebar-nav{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 12px;
}
#sidebar_siges_2026 .sidebar-nav::-webkit-scrollbar{ width: 10px; }
#sidebar_siges_2026 .sidebar-nav::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.14);
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0);
  background-clip: padding-box;
}

/* Sections */
#sidebar_siges_2026 .sidebar-section{
  padding: 12px 10px 6px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: .70rem;
  font-weight: 900;
  color: rgba(15,23,42,.52);
}

/* Links */
#sidebar_siges_2026 .nav-link{
  color: var(--sb-text);
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 11px 11px;
  border-radius: 16px;
  margin: 2px 0;

  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.38);

  transition: background .12s ease, border .12s ease, transform .12s ease;
  user-select:none;
}
#sidebar_siges_2026 .nav-link:hover{
  background: rgba(255,255,255,.62);
  border-color: rgba(37,99,235,.14);
  transform: translateY(-1px);
}
#sidebar_siges_2026 .nav-link i{
  width: 26px;
  text-align:center;
  font-size: 1.12rem;
  color: rgba(37, 99, 235, .92);
}
#sidebar_siges_2026 .nav-link span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron */
#sidebar_siges_2026 .chev{
  margin-left:auto;
  font-size: .9rem;
  color: rgba(15,23,42,.62);
  transition: transform .15s ease;
}
#sidebar_siges_2026 .nav-link[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* Active */
#sidebar_siges_2026 .nav-link.active{
  background: var(--sb-active);
  border-color: var(--sb-accent-border);
  box-shadow: 0 10px 18px rgba(37,99,235,.12);
}

/* Submenu levels */
#sidebar_siges_2026 .submenu.level-1{
  margin: 6px 0 10px 10px;
  padding-left: 12px;
  border-left: 1px dashed rgba(15,23,42,.24);
}
#sidebar_siges_2026 .submenu.level-2{
  margin: 6px 0 10px 14px;
  padding-left: 12px;
  border-left: 1px dashed rgba(15,23,42,.22);
}
#sidebar_siges_2026 .submenu.level-3{
  margin: 6px 0 10px 18px;
  padding-left: 12px;
  border-left: 1px dotted rgba(15,23,42,.22);
}

#sidebar_siges_2026 .submenu .nav-link{
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(255,255,255,.30);
}
#sidebar_siges_2026 .submenu.level-3 .nav-link{
  font-size: .92rem;
  padding: 9px 10px;
}

#sidebar_siges_2026 .submenu .nav-link i{
  color: rgba(2,132,199,.92);
}

/* Footer */
#sidebar_siges_2026 .sb-footer{
  padding: 12px;
  border-top: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.54);
}

#sidebar_siges_2026 .user-row{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 11px 12px;
  border-radius: 16px;

  color: var(--sb-text);
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.64);
}
#sidebar_siges_2026 .user-row:hover{
  background: rgba(255,255,255,.86);
}
#sidebar_siges_2026 .user-row i{
  width: 26px;
  text-align:center;
  font-size: 1.25rem;
  color: rgba(15,23,42,.72);
}
#sidebar_siges_2026 .user-meta{ min-width:0; }
#sidebar_siges_2026 .user-name{
  font-weight: 900;
  font-size: .92rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sidebar_siges_2026 .user-role{
  display:block;
  font-size: .78rem;
  color: rgba(15,23,42,.62);
  margin-top: 2px;
}

#sidebar_siges_2026 .sb-token-btn{
  margin-top: 8px;
  border-radius: 16px;
  border: 1px solid rgba(44,110,73,.30);
  background: rgba(44,110,73,.10);
  color: #1b4332;
}
#sidebar_siges_2026 .sb-token-btn:hover{
  background: rgba(44,110,73,.18);
}

#sidebar_siges_2026 .logout-btn{
  margin-top: 8px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.64);
  color: rgba(15,23,42,.86);
}
#sidebar_siges_2026 .logout-btn:hover{
  background: rgba(255,255,255,.90);
}

/* CTIC logo blanco -> placa oscura */
#sidebar_siges_2026 .institution-wrap{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.12);
  text-align:center;
}
#sidebar_siges_2026 .institution-logo{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, .18);
  border: 1px solid rgba(15, 23, 42, .16);
  max-width: 170px;
  max-height: 56px;
  width:auto;
  height:auto;
  object-fit: contain;
  opacity: .98;
}

/* Collapsed tweaks */
#sidebar_siges_2026.collapsed .title-main,
#sidebar_siges_2026.collapsed .title-sub,
#sidebar_siges_2026.collapsed .park-chip,
#sidebar_siges_2026.collapsed .nav-link span,
#sidebar_siges_2026.collapsed .user-name,
#sidebar_siges_2026.collapsed .user-role,
#sidebar_siges_2026.collapsed .logout-btn span,
#sidebar_siges_2026.collapsed .sb-token-btn span{
  display:none !important;
}

#sidebar_siges_2026.collapsed .brand-badge{
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
#sidebar_siges_2026.collapsed .brand-badge img{
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

#sidebar_siges_2026.collapsed .toggle-btn{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  top: 12px;
  right: 12px;
}

#sidebar_siges_2026.collapsed .nav-link{
  justify-content:center;
  padding: 12px 10px;
}
#sidebar_siges_2026.collapsed .chev{ display:none !important; }
#sidebar_siges_2026.collapsed .collapse{ display:none !important; }

/* =========================================================
   FIX DEFINITIVO: chevrón cortado (scrollbar + overflow-y:auto)
   Solución: gutter real a la derecha + chevrón en flex normal
========================================================= */

/* 1) Gutter a la derecha */
#sidebar_siges_2026 .sidebar-nav{
  padding: 12px 26px 12px 10px !important; /* derecha 26px */
  overflow-x: hidden !important;
}

/* 2) No usamos chevrón absoluto; queda en flex */
#sidebar_siges_2026 .chev{
  position: static !important;
  margin-left: auto !important;
  width: auto !important;   /* pisa el width:26px de .nav-link i */
  text-align: right !important;
}

/* ── Grupo con hub: label navega, chevron expande ─────────────────────────── */
#sidebar_siges_2026 .sb-group-split {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  cursor: default;
  border-radius: 18px;
  overflow: hidden;
}
#sidebar_siges_2026 .sb-group-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 6px 12px 12px;
  color: var(--sb-text);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  border-radius: 18px 0 0 18px;
  transition: background .13s;
  min-width: 0;
}
#sidebar_siges_2026 .sb-group-label i {
  width: 26px;
  text-align: center;
  font-size: 1.05rem;
  color: rgba(37,99,235,.92);
  flex-shrink: 0;
}
#sidebar_siges_2026 .sb-group-label span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 6px;
}
#sidebar_siges_2026 .sb-group-label:hover,
#sidebar_siges_2026 .sb-group-label.active {
  background: var(--sb-active);
  color: var(--sb-text);
}
#sidebar_siges_2026 .sb-group-label.active {
  font-weight: 600;
}
#sidebar_siges_2026 .sb-chev-btn {
  background: none;
  border: none;
  padding: 12px 10px;
  cursor: pointer;
  color: var(--sb-text);
  display: flex;
  align-items: center;
  border-radius: 0 18px 18px 0;
  transition: background .13s;
  flex-shrink: 0;
}
#sidebar_siges_2026 .sb-chev-btn:hover { background: rgba(255,255,255,.62); }
#sidebar_siges_2026 .sb-chev-btn .chev {
  margin-left: 0 !important;
  transition: transform .15s ease;
}
#sidebar_siges_2026 .sb-chev-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

#sidebar_siges_2026.collapsed .sb-group-split { justify-content: center; }
#sidebar_siges_2026.collapsed .sb-group-label { padding: 12px 10px; border-radius: 18px; }
#sidebar_siges_2026.collapsed .sb-group-label span { display: none; }
#sidebar_siges_2026.collapsed .sb-chev-btn { display: none; }

/* ── Dark mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --sb-bg:           rgba(22, 30, 46, .96);
    --sb-bg2:          rgba(15, 22, 36, .96);
    --sb-border:       rgba(255, 255, 255, .10);
    --sb-shadow:       0 20px 55px rgba(0, 0, 0, .55);
    --sb-text:         rgba(226, 232, 240, .92);
    --sb-muted:        rgba(148, 163, 184, .80);
    --sb-accent:       rgba(96, 165, 250, 1);
    --sb-active:       rgba(96, 165, 250, .18);
    --sb-hover:        rgba(96, 165, 250, .10);
    --sb-accent-border:rgba(96, 165, 250, .28);
    --sb-chip:         rgba(52, 211, 153, .14);
    --sb-chip-border:  rgba(52, 211, 153, .28);
  }

  #sidebar_siges_2026 {
    background: linear-gradient(180deg, #16213a, #0f1624); /* fallback opaco dark */
    background: linear-gradient(180deg, var(--sb-bg), var(--sb-bg2));
  }

  #sidebar_siges_2026 .brand-badge {
    background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.20), rgba(15,22,36,.70));
    border-color: rgba(96,165,250,.26);
  }

  #sidebar_siges_2026 .toggle-btn {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: rgba(226,232,240,.82);
  }
  #sidebar_siges_2026 .toggle-btn:hover {
    background: rgba(255,255,255,.14);
  }

  #sidebar_siges_2026 .nav-link {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.07);
  }
  #sidebar_siges_2026 .nav-link:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(96,165,250,.20);
  }
  #sidebar_siges_2026 .nav-link i { color: rgba(96,165,250,.92); }
  #sidebar_siges_2026 .nav-link.active {
    box-shadow: 0 10px 18px rgba(96,165,250,.15);
  }

  #sidebar_siges_2026 .submenu .nav-link { background: rgba(255,255,255,.04); }
  #sidebar_siges_2026 .submenu .nav-link i { color: rgba(125,211,252,.85); }

  #sidebar_siges_2026 .sb-footer {
    background: rgba(255,255,255,.04);
  }

  #sidebar_siges_2026 .user-row {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
  }
  #sidebar_siges_2026 .user-row:hover { background: rgba(255,255,255,.11); }
  #sidebar_siges_2026 .user-row i { color: rgba(226,232,240,.72); }
  #sidebar_siges_2026 .user-role { color: rgba(148,163,184,.80); }

  #sidebar_siges_2026 .sb-token-btn {
    border-color: rgba(52,211,153,.30);
    background: rgba(52,211,153,.10);
    color: rgba(167,243,208,.90);
  }
  #sidebar_siges_2026 .sb-token-btn:hover { background: rgba(52,211,153,.18); }

  #sidebar_siges_2026 .logout-btn {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    color: rgba(226,232,240,.86);
  }
  #sidebar_siges_2026 .logout-btn:hover { background: rgba(255,255,255,.13); }

  #sidebar_siges_2026 .institution-wrap { border-color: rgba(255,255,255,.10); }
  #sidebar_siges_2026 .institution-logo {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.12);
  }

  #sidebar_siges_2026 .park-chip { color: rgba(226,232,240,.86); }
  #sidebar_siges_2026 .park-chip i { color: rgba(52,211,153,.95); }

  #sidebar_siges_2026 .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
  }

  #sidebar_siges_2026 .sb-chev-btn { color: rgba(226,232,240,.80); }
  #sidebar_siges_2026 .sb-chev-btn:hover { background: rgba(255,255,255,.08); }
  #sidebar_siges_2026 .sb-group-label { color: rgba(226,232,240,.90); }
  #sidebar_siges_2026 .sb-group-label:hover,
  #sidebar_siges_2026 .sb-group-label.active { background: var(--sb-active); }
}