/* Sidebar responsive inspirado en Pro Sidebar */
.sidebar {
  width: 260px;
  min-width: 240px;
  background: #0a5084;
  color: #c9d3e7;
  /* Reducir altura ~15% */
  height: calc((100vh - 80px) * 0.85);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.18);
  font-weight: 700;
}
.sidebar .menu {
  list-style: none;
  margin: 0;
  padding: 8px;
}
.sidebar .menu li { margin: 2px 0; }
.sidebar .menu button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: #c9d3e7;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .menu button:hover { background: rgba(255,255,255,.12); }
.sidebar .menu button.active { background: rgba(255,255,255,.20); color: #fff; }
.sidebar .menu .section { 
  margin: 10px 6px 6px; 
  font-size: 12px; 
  letter-spacing: .04em; 
  color: rgba(255,255,255,.75); 
}
.sidebar .menu .logout { background: rgba(255,77,77,.14); color: #ffb3b3; }
.sidebar .menu .logout:hover { background: rgba(255,77,77,.22); color: #fff; }

/* Submenús */
.submenu {
  padding-left: 32px;
  display: none;
}
.submenu.open { display: block; }
.submenu li { margin: 2px 0; }
.submenu button { font-size: 14px; opacity: .92; }

/* Caret */
.caret { margin-left: auto; transition: transform .2s ease; opacity: .8; }
.submenu-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); opacity: 1; }

/* Icons */
.ri { font-size: 18px; opacity: .9; }
.sidebar .menu button .label { flex: 1 1 auto; }

/* Focus */
.sidebar .menu button:focus { outline: 2px solid rgba(255, 255, 255, .45); outline-offset: 2px; }

/* Wrapper y toggle */
.layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
#sidebar-toggle {
  display: none;
}
@media (max-width: 980px) {
  .sidebar {
    position: fixed;
    top: 68px;
    left: 12px;
    width: calc(100vw - 24px);
    max-width: 360px;
    /* Reducir altura ~15% en móvil */
    height: calc((100vh - 84px) * 0.85);
    display: none;
    z-index: 50;
  }
  .sidebar.open { display: block; }
  #sidebar-toggle { display: inline-flex; }
}