/* =========================================
   CENTINELA - SIDEBAR MÁS DELGADO
   Solo desktop / tablet grande
   ========================================= */

:root{
  --cent-sidebar-w: 300px;      /* AJUSTA AQUÍ: 280, 290, 300, 320 */
  --cent-sidebar-gap: 22px;
  --cent-sidebar-bg: #052b52;
  --cent-sidebar-border: rgba(255,255,255,.10);
}

/* =========================
   DESKTOP / TABLET GRANDE
   ========================= */
@media (min-width: 993px){

  /* 1) SIDEBAR */
  .sidebar,
  .main-sidebar,
  .app-sidebar,
  .left-panel,
  .dashboard-sidebar,
  #sidebar,
  #mainSidebar,
  #centSidebar,
  aside.sidebar{
    width: var(--cent-sidebar-w) !important;
    min-width: var(--cent-sidebar-w) !important;
    max-width: var(--cent-sidebar-w) !important;
    background: var(--cent-sidebar-bg) !important;
    overflow-x: hidden !important;
  }

  /* 2) CONTENIDO PRINCIPAL */
  .content,
  .content-wrapper,
  .main-content,
  .page-content,
  .app-content,
  .dashboard-content,
  .right-panel,
  .main-panel,
  main{
    margin-left: calc(var(--cent-sidebar-w) + var(--cent-sidebar-gap)) !important;
  }

  /* si tu layout usa width calculado */
  .content-wrapper,
  .main-content,
  .page-content,
  .app-content,
  .dashboard-content,
  .right-panel,
  .main-panel{
    width: calc(100% - var(--cent-sidebar-w) - var(--cent-sidebar-gap)) !important;
  }

  /* 3) ENCABEZADO DEL SIDEBAR */
  .sidebar .brand,
  .main-sidebar .brand,
  .app-sidebar .brand,
  #sidebar .brand,
  #mainSidebar .brand,
  #centSidebar .brand,
  .sidebar .sidebar-brand,
  .main-sidebar .sidebar-brand,
  .app-sidebar .sidebar-brand,
  #sidebar .sidebar-brand,
  #mainSidebar .sidebar-brand,
  #centSidebar .sidebar-brand{
    padding: 22px 20px 16px 20px !important;
    gap: 12px !important;
  }

  .sidebar .brand img,
  .main-sidebar .brand img,
  .app-sidebar .brand img,
  #sidebar .brand img,
  #mainSidebar .brand img,
  #centSidebar .brand img,
  .sidebar .sidebar-brand img,
  .main-sidebar .sidebar-brand img,
  .app-sidebar .sidebar-brand img,
  #sidebar .sidebar-brand img,
  #mainSidebar .sidebar-brand img,
  #centSidebar .sidebar-brand img{
    max-height: 44px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* texto del logo */
  .sidebar .brand-title,
  .main-sidebar .brand-title,
  .app-sidebar .brand-title,
  #sidebar .brand-title,
  #mainSidebar .brand-title,
  #centSidebar .brand-title,
  .sidebar .sidebar-brand-title,
  .main-sidebar .sidebar-brand-title,
  .app-sidebar .sidebar-brand-title,
  #sidebar .sidebar-brand-title,
  #mainSidebar .sidebar-brand-title,
  #centSidebar .sidebar-brand-title{
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  .sidebar .brand-subtitle,
  .main-sidebar .brand-subtitle,
  .app-sidebar .brand-subtitle,
  #sidebar .brand-subtitle,
  #mainSidebar .brand-subtitle,
  #centSidebar .brand-subtitle,
  .sidebar .sidebar-brand-subtitle,
  .main-sidebar .sidebar-brand-subtitle,
  .app-sidebar .sidebar-brand-subtitle,
  #sidebar .sidebar-brand-subtitle,
  #mainSidebar .sidebar-brand-subtitle,
  #centSidebar .sidebar-brand-subtitle{
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }

  /* 4) SEPARADORES Y ZONAS INTERNAS */
  .sidebar hr,
  .main-sidebar hr,
  .app-sidebar hr,
  #sidebar hr,
  #mainSidebar hr,
  #centSidebar hr{
    margin: 16px 18px !important;
    border-color: var(--cent-sidebar-border) !important;
  }

  .sidebar .section-title,
  .main-sidebar .section-title,
  .app-sidebar .section-title,
  #sidebar .section-title,
  #mainSidebar .section-title,
  #centSidebar .section-title{
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 12px !important;
    letter-spacing: .10em !important;
  }

  /* 5) MENÚ DE NAVEGACIÓN */
  .sidebar .nav,
  .main-sidebar .nav,
  .app-sidebar .nav,
  #sidebar .nav,
  #mainSidebar .nav,
  #centSidebar .nav{
    padding: 4px 12px !important;
  }

  .sidebar .nav a,
  .main-sidebar .nav a,
  .app-sidebar .nav a,
  #sidebar .nav a,
  #mainSidebar .nav a,
  #centSidebar .nav a,
  .sidebar .menu a,
  .main-sidebar .menu a,
  .app-sidebar .menu a,
  #sidebar .menu a,
  #mainSidebar .menu a,
  #centSidebar .menu a{
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    gap: 10px !important;
  }

  .sidebar .nav a i,
  .main-sidebar .nav a i,
  .app-sidebar .nav a i,
  #sidebar .nav a i,
  #mainSidebar .nav a i,
  #centSidebar .nav a i,
  .sidebar .menu a i,
  .main-sidebar .menu a i,
  .app-sidebar .menu a i,
  #sidebar .menu a i,
  #mainSidebar .menu a i,
  #centSidebar .menu a i{
    font-size: 16px !important;
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
  }

  /* 6) ZONA INFERIOR DEL USUARIO */
  .sidebar .sidebar-footer,
  .main-sidebar .sidebar-footer,
  .app-sidebar .sidebar-footer,
  #sidebar .sidebar-footer,
  #mainSidebar .sidebar-footer,
  #centSidebar .sidebar-footer,
  .sidebar .user-block,
  .main-sidebar .user-block,
  .app-sidebar .user-block,
  #sidebar .user-block,
  #mainSidebar .user-block,
  #centSidebar .user-block{
    padding: 16px 18px 18px 18px !important;
    font-size: 14px !important;
  }

  .sidebar .logout-link,
  .main-sidebar .logout-link,
  .app-sidebar .logout-link,
  #sidebar .logout-link,
  #mainSidebar .logout-link,
  #centSidebar .logout-link{
    font-size: 14px !important;
  }
}

/* =========================
   TABLET MEDIA
   ========================= */
@media (min-width: 993px) and (max-width: 1280px){
  :root{
    --cent-sidebar-w: 280px;
    --cent-sidebar-gap: 18px;
  }
}

/* =========================
   MÓVIL
   ========================= */
@media (max-width: 992px){
  .sidebar,
  .main-sidebar,
  .app-sidebar,
  .left-panel,
  .dashboard-sidebar,
  #sidebar,
  #mainSidebar,
  #centSidebar,
  aside.sidebar{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  .content,
  .content-wrapper,
  .main-content,
  .page-content,
  .app-content,
  .dashboard-content,
  .right-panel,
  .main-panel,
  main{
    margin-left: 0 !important;
    width: 100% !important;
  }
}