:root {
  --manage-red: #9f2241;
  --manage-red-dark: #7f1933;
  --manage-red-soft: #fbf0f3;
  --manage-ink: #222630;
  --manage-muted: #697180;
  --manage-line: #e5e8ed;
  --manage-bg: #f5f7f9;
}

header.navbar {
  background: linear-gradient(110deg, #8b1936 0%, #9f2241 45%, #c70b3b 100%) !important;
  box-shadow: 0 5px 20px rgba(67, 13, 29, .18);
  min-height: 84px;
  padding: .7rem 1.8rem !important;
}

header.navbar::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}

header.navbar .navbar-logo {
  max-height: 61px;
}

header.navbar .navbar-title {
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  letter-spacing: -.025em;
}

header.navbar .navbar-buttons .btn {
  align-items: center;
  background: rgba(92, 7, 31, .7) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 14px rgba(63, 8, 23, .14);
  display: inline-flex;
  font-size: .76rem;
  min-height: 40px;
  padding: .55rem .9rem;
}

header.navbar .navbar-buttons .btn:hover {
  background: rgba(75, 5, 25, .88) !important;
}

.manage-shell {
  background: var(--manage-bg);
  min-height: calc(100dvh - 84px) !important;
  position: relative;
}

aside.sidebar-bg.manage-sidebar {
  background: #fff;
  border-right: 1px solid var(--manage-line);
  flex: 0 0 270px !important;
  flex-direction: column;
  height: calc(100dvh - 84px) !important;
  overflow-y: auto;
  padding: 1.15rem .9rem 1rem !important;
  position: sticky !important;
  top: 84px !important;
  width: 270px !important;
  z-index: 20;
}

@media (min-width: 992px) {
  aside.sidebar-bg.manage-sidebar {
    display: flex !important;
  }
}

.manage-sidebar__brand {
  align-items: center;
  display: flex;
  gap: .7rem;
  padding: .25rem .4rem 1.1rem;
}

.manage-sidebar__brand-icon {
  align-items: center;
  background: linear-gradient(145deg, var(--manage-red), var(--manage-red-dark));
  border-radius: 11px;
  box-shadow: 0 7px 16px rgba(159, 34, 65, .18);
  color: #fff;
  display: flex;
  flex: 0 0 39px;
  height: 39px;
  justify-content: center;
}

.manage-sidebar__brand strong,
.manage-sidebar__brand small {
  display: block;
}

.manage-sidebar__brand strong {
  color: var(--manage-ink);
  font-size: .78rem;
}

.manage-sidebar__brand small {
  color: var(--manage-muted);
  font-size: .59rem;
  margin-top: .1rem;
}

.manage-sidebar__label {
  color: #a0a6b0;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .13em;
  margin: .3rem .65rem .55rem;
  text-transform: uppercase;
}

.manage-sidebar > .nav {
  flex: 0 0 auto;
}

.manage-sidebar .nav-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #4d5461 !important;
  display: flex;
  font-size: .75rem;
  font-weight: 650;
  gap: .65rem;
  margin-bottom: .25rem;
  min-height: 44px;
  padding: .5rem .62rem;
  position: relative;
}

.manage-sidebar .nav-link::before {
  background: var(--manage-red);
  border-radius: 0 4px 4px 0;
  content: "";
  height: 22px;
  left: -.9rem;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
}

.manage-sidebar .nav-link:hover {
  background: #f7f8fa;
  color: var(--manage-red) !important;
}

.manage-sidebar .nav-link.active,
.manage-sidebar .nav-link:focus {
  background: var(--manage-red-soft);
  color: var(--manage-red) !important;
}

.manage-sidebar .nav-link.active::before {
  opacity: 1;
}

.manage-nav-icon {
  align-items: center;
  background: #f1f3f5;
  border-radius: 8px;
  color: #717986;
  display: flex;
  flex: 0 0 31px;
  height: 31px;
  justify-content: center;
}

.manage-sidebar .nav-link:hover .manage-nav-icon,
.manage-sidebar .nav-link.active .manage-nav-icon {
  background: #fff;
  color: var(--manage-red);
  box-shadow: 0 3px 9px rgba(53, 58, 67, .07);
}

.manage-nav-chevron {
  font-size: .65rem !important;
  margin-left: auto;
  transition: transform .2s ease;
  width: auto !important;
}

.manage-sidebar #adminAccountLink[aria-expanded="true"] .manage-nav-chevron {
  transform: rotate(180deg);
}

.manage-sidebar hr {
  background: var(--manage-line);
  margin: .65rem .4rem !important;
}

.manage-sidebar .collapse .nav {
  border-left: 1px solid #e5e7eb;
  margin: .2rem 0 .45rem 1.3rem !important;
  padding-left: .55rem;
}

.manage-sidebar .collapse .nav-link {
  border-radius: 7px;
  font-size: .68rem;
  min-height: 34px;
  padding: .35rem .55rem;
}

.manage-sidebar .collapse .nav-link::before {
  display: none;
}

.manage-sidebar .collapse .nav-link i {
  color: #8a919d;
  font-size: .77rem;
  margin-right: .15rem !important;
  width: 16px;
}

.manage-sidebar__account {
  align-items: center;
  background: #f7f8fa;
  border: 1px solid #eceef1;
  border-radius: 12px;
  display: flex;
  gap: .55rem;
  margin-top: auto;
  padding: .65rem;
}

.manage-sidebar__avatar {
  align-items: center;
  background: var(--manage-red);
  border-radius: 9px;
  color: #fff;
  display: flex;
  flex: 0 0 34px;
  font-size: .76rem;
  font-weight: 800;
  height: 34px;
  justify-content: center;
}

.manage-sidebar__account-text {
  min-width: 0;
}

.manage-sidebar__account-text strong,
.manage-sidebar__account-text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-sidebar__account-text strong {
  color: var(--manage-ink);
  font-size: .66rem;
}

.manage-sidebar__account-text small {
  color: var(--manage-muted);
  font-size: .55rem;
  margin-top: .1rem;
}

.manage-sidebar__account > a {
  color: #8b929d;
  font-size: .7rem;
  margin-left: auto;
  padding: .25rem;
}

.manage-main {
  min-width: 0;
}

.manage-content {
  min-height: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2.5rem) 3rem !important;
}

.manage-content > .pt-2 {
  margin: 0 auto .75rem;
  max-width: 1280px;
  padding-top: 0 !important;
}

.manage-content > .pt-2 .alert {
  border: 0;
  border-left: 4px solid var(--manage-red);
  border-radius: 11px;
  box-shadow: 0 7px 18px rgba(35, 40, 49, .07);
  font-size: .76rem;
  margin-bottom: .7rem;
  padding: .8rem 1rem;
}

@media (max-width: 991.98px) {
  header.navbar {
    min-height: 76px;
    padding: .65rem 1rem !important;
  }

  header.navbar .navbar-logo {
    max-height: 48px;
  }

  .manage-shell {
    min-height: calc(100dvh - 76px) !important;
  }

  /* Deja libre el espacio del botón flotante del menú. */
  .manage-content {
    padding-top: 4.25rem !important;
  }

  .mobile-menu-fab {
    align-items: center;
    background: linear-gradient(145deg, var(--manage-red), var(--manage-red-dark)) !important;
    box-shadow: 0 8px 20px rgba(126, 25, 51, .25) !important;
    display: flex;
    height: 44px;
    left: 1rem;
    top: 88px;
    width: 44px;
  }
}

@media (max-width: 575.98px) {
  header.navbar .navbar-title {
    display: none;
  }

  header.navbar .navbar-logo {
    margin: 0;
    max-height: 43px;
  }

  .manage-content {
    padding-inline: .8rem !important;
  }
}