/* Control Facility V11.91 · navegación vertical izquierda */
:root {
  --cf-left-menu-width: 284px;
}

aside.sidebar {
  position: fixed !important;
  inset: var(--cf-appbar-height) auto 0 0 !important;
  z-index: 10020 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: var(--cf-left-menu-width) !important;
  min-width: var(--cf-left-menu-width) !important;
  max-width: var(--cf-left-menu-width) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 14px !important;
  gap: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  border: 0 !important;
  border-right: 1px solid #c8dbe5 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 10px 0 28px rgba(15, 52, 71, 0.1) !important;
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}

aside.sidebar .brand,
aside.sidebar .nav-label,
aside.sidebar .sidebar-foot,
aside.sidebar .cf-sidebar-status {
  display: none !important;
}

aside.sidebar .site-switch {
  position: static !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 68px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: visible !important;
  border: 1px solid #cddde6 !important;
  border-radius: 12px !important;
  background: #f5f9fb !important;
}

aside.sidebar .site-switch small {
  display: block !important;
  margin: 0 0 6px !important;
  color: #607789 !important;
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
}

aside.sidebar .site-switch select,
aside.sidebar .site-switch button {
  width: 100% !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
}

aside.sidebar nav {
  position: static !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  gap: 7px !important;
  overflow: visible !important;
}

aside.sidebar nav > button,
aside.sidebar nav > .cf-nav-group {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

aside.sidebar nav > button,
aside.sidebar nav .cf-nav-group-title {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #d4e2e9 !important;
  border-radius: 10px !important;
  background: #f1f6f9 !important;
  color: #263d51 !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: normal !important;
}

aside.sidebar nav > button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

aside.sidebar nav > button[hidden],
aside.sidebar nav > button[aria-hidden="true"] {
  display: none !important;
}

aside.sidebar nav .cf-nav-group-title {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  gap: 8px !important;
}

aside.sidebar nav .cf-nav-group-title::before {
  grid-column: 1 !important;
  width: 20px !important;
  min-width: 20px !important;
}

aside.sidebar nav .cf-nav-group-title > span {
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  color: inherit !important;
  white-space: normal !important;
}

aside.sidebar nav .cf-nav-group-title > b {
  grid-column: 3 !important;
  display: block !important;
  width: 16px !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-align: center !important;
}

aside.sidebar nav .cf-nav-group-options {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 6px 0 2px !important;
  padding: 0 0 0 12px !important;
  gap: 5px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

aside.sidebar nav .cf-nav-group-options[hidden] {
  display: none !important;
}

aside.sidebar nav .cf-nav-option {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border: 1px solid #dce7ed !important;
  border-radius: 9px !important;
  background: #f7fafc !important;
  color: #344c5f !important;
  font-size: 0.71rem !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: normal !important;
}

aside.sidebar nav > button.active,
aside.sidebar nav .cf-nav-group.open > .cf-nav-group-title,
aside.sidebar nav .cf-nav-option.active {
  border-color: #19b9e8 !important;
  background: linear-gradient(135deg, #19b9e8, #0793b5) !important;
  color: #ffffff !important;
}

aside.sidebar > #facilityAccountControls {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  gap: 7px !important;
}

aside.sidebar > #facilityAccountControls button,
aside.sidebar > #facilityLogout {
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: 0.68rem !important;
  white-space: normal !important;
}

aside.sidebar > #facilityRoleBadge {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

aside.sidebar > #facilityLogout {
  position: static !important;
  display: block !important;
  margin: 0 !important;
}

.app-shell {
  padding-top: var(--cf-appbar-height) !important;
}

.main {
  width: calc(100% - var(--cf-left-menu-width)) !important;
  max-width: calc(100% - var(--cf-left-menu-width)) !important;
  margin-right: 0 !important;
  margin-left: var(--cf-left-menu-width) !important;
  padding-top: 18px !important;
}

.cf-mobile-menu-toggle,
.cf-mobile-menu-backdrop {
  display: none !important;
}

@media (max-width: 900px) {
  :root { --cf-left-menu-width: min(310px, calc(100vw - 44px)); }

  aside.sidebar {
    z-index: 10055 !important;
    transform: translateX(-110%) !important;
    transition: transform 0.2s ease !important;
  }

  body.cf-mobile-menu-open aside.sidebar {
    transform: translateX(0) !important;
  }

  .main {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .cf-mobile-menu-toggle {
    position: fixed !important;
    top: 10px !important;
    right: auto !important;
    left: 10px !important;
    z-index: 10070 !important;
    display: grid !important;
  }

  .cf-mobile-menu-backdrop {
    position: fixed !important;
    inset: var(--cf-appbar-height) 0 0 0 !important;
    z-index: 10050 !important;
  }

  body.cf-mobile-menu-open .cf-mobile-menu-backdrop {
    display: block !important;
  }
}