/* Sidebar styles moved from templates */

.main-sidebar { transition: width .2s ease; z-index: 1040; }
.sidebar-collapsed .main-sidebar { width: 70px; }
.sidebar-collapsed .content-wrapper { margin-left: 70px; }
.sidebar-collapsed .main-sidebar .brand-text,
.sidebar-collapsed .main-sidebar .user-panel .info,
.sidebar-collapsed .main-sidebar .nav-sidebar .nav-link p { display: none; }
.sidebar-collapsed .main-sidebar .nav-sidebar .nav-link { text-align: center; }

/* Ensure the toggle button inside sidebar remains visible and rotates */
.sidebar-toggle { position: relative; z-index: 1200; }
.sidebar-collapsed .sidebar-toggle i { transform: rotate(180deg); transition: transform .2s ease; }

/* Mobile: off-canvas sidebar (overlay) */
.main-sidebar.offcanvas {
  position: fixed;
  top: 0; /* will be set dynamically to navbar height on open via JS */
  left: 0;
  height: calc(100vh - var(--navbar-height, 56px));
  width: 250px;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 1050;
  overflow-y: auto;
}
.main-sidebar.offcanvas.open { transform: translateX(0); }

/* Mobile backdrop */
#sidebarBackdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1045; }
#sidebarBackdrop.open { display:block; }

/* Prevent content shift on mobile when sidebar is offcanvas */
@media (max-width: 767.98px){
  .content-wrapper { margin-left: 0 !important; }
}

/* ============================================
   PROFILE IMAGES - SOLUCIÓN DEFINITIVA
   ============================================ */

/* Sidebar user panel - container circular */
.sidebar .user-panel .image {
  width: 45px !important;
  height: 45px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #343a40 !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Sidebar user panel - imagen */
.sidebar .user-panel .image img,
.sidebar .user-panel .image .img-circle {
  width: 100% !important;
  height: 100% !important;
  min-width: 45px !important;
  min-height: 45px !important;
  max-width: 45px !important;
  max-height: 45px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
  display: block !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navbar top - imagen pequeña en barra superior */
.navbar .user-image {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
}

/* Navbar dropdown - imagen grande en menú desplegable */
.navbar .user-header {
  background: #007bff !important;
  padding: 10px;
  text-align: center;
}

.navbar .user-header img {
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
  min-height: 90px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255, 255, 255, 0.2) !important;
  margin: 0 auto 10px !important;
}