/* =====================================================
   SIDEBAR
   ===================================================== */

.sidebar {
  width: 270px;
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  color: #ecf0f3;
  display: flex;
  flex-direction: column;
  transition:
    width 0.18s ease,
    padding 0.18s ease;
  z-index: 20;

  /* modo oscuro (default) */
  background: #062a56;

  border-right: 1px solid var(--line);
}
#sidebarToggleBtn svg {
  width: 22px;
  height: 22px;
}
/* Sidebar colapsado */
.sidebar.collapsed {
  width: 88px;
  padding: 16px 8px;
}

/* =====================================================
   BRAND / LOGO
   ===================================================== */

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
}

.brandLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logo {
  width: 70px;
  height: 70px;
  position: relative;
  right: 19px;
  border-radius: 12px;
}

/* =====================================================
   FOOTER SIDEBAR (USUARIO)
   ===================================================== */

.sidebarFooter {
  border-top: 1px solid var(--line);
  padding: 10px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.userMini {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(79, 124, 255, 0.18);
  border: 1px solid rgba(79, 124, 255, 0.35);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.userMiniName {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.userMiniRole {
  font-size: 11px;
}

/* Sidebar colapsado */
.sidebar.collapsed .userMiniText,
.sidebar.collapsed #sbSettingsBtn {
  display: none;
}

.sidebar.collapsed .sidebarFooter {
  justify-content: center;
}

/* =====================================================
   SIDEBAR
   ===================================================== */

.sidebar.collapsed .brandText {
  display: none;
}

#sidebarToggleBtn svg {
  transition: transform 0.18s ease;
}

.sidebar.collapsed #sidebarToggleBtn svg {
  transform: rotate(180deg);
}

.sidebar.collapsed .nav h2 {
  display: none;
}

.sidebar.collapsed .nav .lbl {
  display: none;
}

/* Tooltip en modo colapsado */
.sidebar.collapsed .nav a::after {
  content: attr(data-tip);
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.btn {
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  color: var(--text1);
  background: var(--btn);
}

.btn.secondary {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text1);
}

.btn.small {
  padding: 7px 9px;
  font-size: 12px;
}

/*diseño agragado*/
.iconBtn svg {
  width: 20px;
  height: 20px;
  display: block; /* 🔑 clave */
}
#sidebarToggleBtn svg {
  width: 22px;
  height: 22px;
}
.nav .ico svg {
  width: 24px;
  height: 24px;
}
/* Botón icono (toggle, settings, etc) */
.iconBtn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  padding: 0;
  line-height: 0;
  border: 1px solid #fff;
  background: #fff;
  color: #062a56;
  display: flex;
  align-items: center;
  position: relative;
  left: 15px;
  justify-content: center;
  cursor: pointer;
}
.iconBtn:hover {
  background: #ecf0f3;
}