/* ================================
     Tokens de diseño (coherentes con el dashboard)
  ===================================*/
  :root{
    --accent:        #22c5b8;       /* verde del sistema */
    --accent-600:    #169ea3;
    --accent-soft:   rgba(34,197,94,.15);

    --surface:       #ffffff;       /* cards/topbar */
    --surface-muted: #f5f7f6;       /* fondo de página */
    --text:          #0a0f1a;       /* slate-900 */
    --muted:         #6b7280;       /* slate-500 */

    --sidebar-bg:    #0e141b;       /* negro grisáceo plano */
    --sidebar-line:  #1f2937;       /* borde sutil */
    --sidebar-txt:   rgba(255,255,255,.86);
    --sidebar-txt-d: rgba(255,255,255,.55);
    /*--sidebar-hover: rgba(255,255,255,.08);*/
    --radius:        12px;
    --shadow:        0 8px 20px rgba(2,6,23,.06);
    --submenu-hover: rgba(51, 221, 179, 0.18);   /* verde suave al pasar */
    --submenu-active: rgba(44, 175, 153, 0.28);  /* verde un poco más fuerte al seleccionar */
    --sbw: 240px;        /* ancho expandido */
    --sbw-collapsed: 84px; /* ancho colapsado */
  }

  /* ================================
     Imágenes utilitarias
  ===================================*/
  img.pequeña { width: 50px;  height: 50px;  object-fit: contain; }
  img.mediana { width: 100px; height: 100px; object-fit: contain; }
  img.grande  { width: 150px; height: 150px; object-fit: contain; }

  .texto { font-size: .875rem; }
  .dataTables_length, .dataTables_length select{ font-size: 1em; }

  /* ================================
     Topbar (claro, como el resto)
  ===================================*/
  .topbar{
    height: 54px;
    padding-block: .25rem;
    background: var(--sidebar-bg, #0e141b) !important;
    color: rgba(255,255,255,.7);
    box-shadow: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 254px !important;
    z-index: 1030 !important;
  }
  .topbar .nav-item{ margin-top: 4px; }
  .topbar .nav-link, .topbar .dropdown{ padding-block: .25rem; }

  /* ================================
     Sidebar
  ===================================*/

  /* ===== Layout base sin “saltos” ===== */
  #wrapper{ display:flex; min-height:100vh; }

  /* contenedor */
  #accordionSidebar{
    width: 240px;
    overflow-y: auto; 
    transition: width .25s ease;
    position: sticky;             /* se queda fijo al hacer scroll */
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-line);
  }
  .sidebar{ background: var(--sidebar-bg) !important; }






  /* brand */
  .sidebar-brand{ padding: 1rem 1rem .5rem; }
  .sidebar-brand .logo{
    width: 160px; max-width: 80%;
    height: auto; display: block; margin: 0 auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  }



/* Collapse en escritorio (ya lo usás) */
.sidebar.toggled { width: var(--sbw-collapsed, 84px) !important; }

/* Para que TODO el contenido responda al toggle (ya lo contemplamos en respuestas previas) */
body.sidebar-toggled #accordionSidebar { width: var(--sbw-collapsed, 84px); }

/* OPCIONAL: en pantallas chicas, que directamente "desaparezca" deslizándose */
@media (max-width: 991.98px){
  #accordionSidebar { transition: transform .25s ease, width .25s ease; }
  body.sidebar-toggled #accordionSidebar {
    transform: translateX(-100%);   /* fuera de la pantalla */
    width: var(--sbw);               /* mantiene su ancho lógico */
  }
}











  .sidebar.toggled .sidebar-brand,
  #accordionSidebar.toggled .sidebar-brand,
  body.sidebar-toggled .sidebar-brand {
    font-size: 0.75rem;  /* achica el texto */
    opacity: 0.8;        /* opcional: leve atenuación */
  }
  

  /* items raíz */
  .sidebar .nav-item{ margin: .06rem .5rem; }
  .sidebar .nav-item .nav-link{
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    padding: .25rem .75rem;
    font-size: .68rem;
    line-height: 1.1;
    color: var(--sidebar-txt) !important;
    border-radius: var(--radius);
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .sidebar .nav-link i{
    font-size: 1.1rem;
    width: 1.25rem; min-width: 1.25rem; text-align: center;
    color: inherit;
  }

  /* hover/active coherentes con acento */
  .sidebar .nav-item .nav-link:hover{
    background: var(--sidebar-hover);
    color: #fff !important;
  }
  .sidebar .nav-item.active > .nav-link,
  .sidebar .nav-link[aria-expanded="true"]{
    background: var(--accent-soft);
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(34,197,94,.25);
  }

  /* texto (span) visible por defecto */
  .sidebar .nav-item .nav-link span{ display: inline; color: inherit; }

  /* suprime caret de Bootstrap en colapsables */
  .sidebar .nav-link.collapsed::after{ display: none !important; content: none !important; }

  /* subitems (collapse) */
  .collapse.show,
  .collapsing{ background: transparent; }
  .collapse-inner{
    padding: .25rem .25rem .5rem;
    background: transparent !important;
  }
  .collapse-item{
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .75rem;
    font-size: .85rem;
    color: var(--sidebar-txt-d) !important;
    border-radius: calc(var(--radius) - 2px);
    transition: background-color .15s ease, color .15s ease;
  }
  .collapse-item:hover{
    background: var(--sidebar-hover);
    color: #fff !important;
  }

  /* toggled (colapsado) */
  .sidebar.toggled{ width: 84px !important; }
  .sidebar.toggled .nav-item{ margin: .125rem 0; }

  .sidebar.toggled .nav-item .nav-link{
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: .5rem 0 !important; }



  .sidebar.toggled .nav-item .nav-link span{ display: none; }

  /* divider */
  .sidebar-divider{
    border-top: 1px solid var(--sidebar-line);
    margin: .5rem 1rem;
    
  }

/* Base: color legible sobre barra oscura */
.sidebar .collapse .collapse-item{
  color: rgba(255,255,255,.80) !important;
  background: transparent !important;
}

/* Hover: texto blanco y fondo verdoso */
.sidebar .collapse .collapse-item:hover{
  background: var(--submenu-hover) !important;
  color: #fff !important;
}

/* Activa/seleccionada: más contraste y contorno sutil */
.sidebar .collapse .collapse-item.active,
.sidebar .collapse .collapse-item[aria-current="page"],
.sidebar .collapse .collapse-item:focus{
  background: var(--submenu-active) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.35);
  outline: none;
}

/* Íconos del submenú heredan color del texto */
.sidebar .collapse .collapse-item i{
  color: inherit !important;
}

/* (opcional) Estado del item raíz abierto: mantené el contraste del título */
.sidebar .nav-link[aria-expanded="true"]{
  color: #fff !important;
}

  /* ================================
     Helpers para layout
  ===================================*/
  body{ background: var(--surface-muted); }
  #content-wrapper{ background: transparent; }
  .card{ border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(2,6,23,.04); }

  /* Ajuste de foco accesible */
  .sidebar .nav-link:focus,
  .collapse-item:focus{
    outline: 2px solid var(--accent-600);
    outline-offset: 2px;
  }

  #page-header {
  display: flex;
  align-items: center;
  min-height: 48px;
}
#page-header h2 {
  font-weight: 600;
  color: var(--text, #0a0f1a);
}
  









/* === Tokens extra para flyout === */
:root{
  --sidebar-flyout-bg: #111827;              /* fondo del menú flotante */
  --sidebar-flyout-shadow: 0 12px 28px rgba(0,0,0,.35);
  --sidebar-hover: rgba(255,255,255,.08);    /* reactivamos hover usado arriba */
}

/* Asegura contexto de posicionamiento */
.sidebar, .sidebar .nav-item { position: relative; }

/* ═══════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR — icon-only + flyout
═══════════════════════════════════════════════════════════ */

/* 1) Layout del sidebar colapsado */
.sidebar.toggled { width: 84px !important; }
.sidebar.toggled .nav-item { margin: .125rem 0; }

/* Nav-link: centrar el ícono perfectamente — sin padding horizontal */
.sidebar.toggled .nav-item .nav-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: .5rem 0 !important;
  width: 100% !important;
}

/* Ocultar SOLO los spans de texto — NO el .nb-icon ni badges */
.sidebar.toggled .nav-item .nav-link > span:not(.nb-icon):not([id*=”Badge”]):not([class*=”badge”]) {
  display: none !important;
}

/* Asegura que .nb-icon sea visible y centrado */
.sidebar.toggled .nb-icon {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  font-size: .62rem !important;
}

/* 2) FLYOUT: position:fixed escapa overflow:hidden del sidebar */
.sidebar.toggled .nav-item > .collapse,
.sidebar.toggled .nav-item > .collapsing {
  position: fixed !important;      /* fixed nunca es clippeado por overflow:hidden */
  left: 90px !important;           /* 84px sidebar + 6px gap */
  top: 0;                          /* SIN !important: el JS inline style lo sobreescribe */
  display: block !important;
  height: auto !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateX(-8px) !important;
  background: #141d2e !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  min-width: 210px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3) !important;
  z-index: 9990 !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  pointer-events: none !important;
}

/* Mostrar flyout en hover */
.sidebar.toggled .nav-item:hover > .collapse,
.sidebar.toggled .nav-item:focus-within > .collapse {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Cabecera del flyout */
.sidebar.toggled .nav-item > .collapse[data-section]::before {
  content: attr(data-section);
  display: block;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 4px 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 4px;
}

/* Items dentro del flyout */
.sidebar.toggled .collapse-inner {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.sidebar.toggled .collapse-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.7) !important;
  white-space: nowrap !important;
  transition: background .1s, color .1s !important;
}
.sidebar.toggled .collapse-item:hover {
  background: rgba(96,165,250,.15) !important;
  color: #e2e8f0 !important;
}
.sidebar.toggled .collapse-item.active,
.sidebar.toggled .collapse-item[aria-current=”page”] {
  background: rgba(96,165,250,.2) !important;
  color: #93c5fd !important;
}
.sidebar.toggled .collapse-item i {
  font-size: .82rem !important;
  opacity: .7;
  width: auto !important;
  min-width: unset !important;
}

/* 3) Tooltip para ítems de enlace directo (sin submenú) */
.sidebar.toggled .nav-item .nav-link[title]:not([data-toggle=”collapse”]) {
  position: relative !important;
}
.sidebar.toggled .nav-item .nav-link[title]:not([data-toggle=”collapse”])::after {
  content: attr(title);
  position: fixed;
  left: 90px;
  top: auto; /* sobreescrito por JS */
  background: #141d2e;
  border: 1px solid rgba(255,255,255,.12);
  color: #e2e8f0;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.sidebar.toggled .nav-item:hover .nav-link[title]:not([data-toggle=”collapse”])::after {
  opacity: 1;
}

/* 4) Active state en colapsado — sin padding horizontal para mantener centrado */
.sidebar.toggled .nav-item.active > .nav-link,
.sidebar.toggled .nav-item > .nav-link[aria-expanded=”true”] {
  background: rgba(96,165,250,.18) !important;
  border-left: none !important;
  padding: .5rem 0 !important;
  box-shadow: none !important;
}

/* 5) Badge de Chat: dot compacto cuando está colapsado */
.sidebar.toggled #chatMentionBadge {
  position: absolute !important;
  top: 2px !important;
  right: 6px !important;
  margin-left: 0 !important;
  min-width: 16px !important;
  height: 16px !important;
  font-size: .55rem !important;
  padding: 0 4px !important;
  line-height: 16px !important;
  border-radius: 999px !important;
}
.sidebar.toggled .nav-link { position: relative !important; }


/* --- Layout base: header arriba, contenido al medio, footer abajo --- */
/* Necesita mayor especificidad que sb-admin-2 (#wrapper #content-wrapper { width:100% }) */
#wrapper #content-wrapper {
  flex: 1 1 0 !important; /* reemplaza width:100% — el sidebar ocupa su ancho y este toma el resto */
  min-width: 0 !important;
  width: 0 !important;    /* flex-grow lo expande; evita que width:100% desborde */
  overflow-x: visible !important; /* permite dropdowns y topbar sin clipear */
}

/* Fix: el sidebar NUNCA debe encoger en el flex layout — evita que el content-wrapper lo tape */
#accordionSidebar {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}
#content-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content-wrapper > #content {
  /* el contenido ocupa el espacio disponible */
  flex: 1 0 auto;
}

/* el footer no crece: se queda abajo sin empujar el resto */
footer.sticky-footer {
  flex-shrink: 0;
}

/* --- Topbar siempre arriba (no abajo) --- */
#topbar.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--sidebar-bg, #0e141b) !important;
}

/* Por si algún estilo previo la estaba mandando abajo */
#topbar {
  bottom: auto !important;
  margin-top: 0 !important;
}

/* Asegurá que el contenedor no use flex que empuje al final */
#content {
  display: block;   /* evita justify-content:flex-end heredado de algún reset */
}

/* Evitar que algo esté “fixed-bottom” por accidente */
#topbar.fixed-bottom {
  position: sticky !important;
  bottom: auto !important;
}


#accordionSidebar {
  position: relative;
  padding-bottom: 90px; /* espacio para que el contenido no quede encima del logo */
}

/* Posicionamos el logo abajo a la izquierda */
#accordionSidebar .logo {
  position: absolute;
  left: 18px;        /* separación desde el borde izquierdo */
  bottom: 18px;      /* separación desde el borde inferior */
  width: 160px;      /* ajustá al tamaño que quieras */
  max-width: 95%;    /* previene que quede enorme en pantallas grandes */
  filter: none;      /* si necesitás, podés invertir colores u opacidad */
  transition: opacity .2s ease, transform .2s ease;
}

/* Si tu theme colapsa el sidebar con una clase, ocultarlo al colapsar */
/* Ajustá `.sidebar-collapsed` al selector real que use tu template si es distinto */
.sidebar.sidebar-collapsed .logo,
#accordionSidebar.collapsed .logo {
  display: none;
}

/* En pantallas chicas ocultamos el logo */
@media (max-width: 991.98px) {
  #accordionSidebar .logo,
  .sidebar .logo.logo-full,
  .sidebar .logo.logo-mini {
    display: none !important;
  }
}




#accordionSidebar .logo-full {
  display: block;
  position: absolute;
  bottom: 18px;
  left: 18px;
  width: 180px;
  max-width: calc(100% - 36px);
  transition: opacity .2s ease;
}

#accordionSidebar .logo-mini {
  display: none; /* oculto por defecto */
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: auto;
  transition: opacity .2s ease;
}

/* Estado colapsado */
.sidebar.toggled .logo-full {
  display: none; /* se oculta el logo grande */
}

.sidebar.toggled .logo-mini {
  display: block; /* se muestra el logo chico */
}



/* Contenedor preparado para posicionar los logos */
#accordionSidebar{
  position: relative;
  padding-bottom: 120px; /* reserva espacio para el logo */
}

/* Estilos individuales (NO uses ya #accordionSidebar .logo genérico) */
#accordionSidebar .logo-full{
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 180px;
  max-width: calc(100% - 36px);
  height: auto;
  display: block;                 /* visible por defecto */
  transition: opacity .2s ease, transform .2s ease;
}

#accordionSidebar .logo-mini{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 38px;                    /* ajustá a gusto */
  height: auto;
  display: none;                  /* oculto por defecto */
  transition: opacity .2s ease, transform .2s ease;
}

/* ===== Mostrar/ocultar cuando la barra está colapsada ===== */
/* Cubrimos los 3 patrones más comunes de toggle */
.sidebar.toggled #accordionSidebar .logo-full,
#accordionSidebar.toggled .logo-full,
body.sidebar-toggled #accordionSidebar .logo-full{
  display: none !important;
}

.sidebar.toggled #accordionSidebar .logo-mini,
#accordionSidebar.toggled .logo-mini,
body.sidebar-toggled #accordionSidebar .logo-mini{
  display: block !important;
}

/* En pantallas chicas, ocultar ambos logos */
@media (max-width: 991.98px){
  #accordionSidebar .logo-mini,
  #accordionSidebar .logo-full,
  .sidebar .logo.logo-full,
  .sidebar .logo.logo-mini { display: none !important; }
}

#accordionSidebar {
  overflow-x: hidden !important;
}

html, body {
  overflow-x: hidden;
}


/* ===== Mobile: sidebar off-canvas real (sin hueco) ===== */
@media (max-width: 992px) {

  /* El layout principal deja de ser flex para no reservar huecos */
  #wrapper { display: block !important; }

  /* El UL real del sidebar sale del flujo (override con !important) */
  #accordionSidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: var(--sbw, 240px) !important;
    transform: translateX(0);
    transition: transform .22s ease;
    z-index: 1040;
  }

  /* Cuando está “toggled” (tu estado de minimizado), se oculta fuera de pantalla */
  body.sidebar-toggled #accordionSidebar,
  #accordionSidebar.toggled {
    transform: translateX(-100%) !important;
  }

  /* El contenido ocupa el 100% del ancho siempre en mobile.
     Usa 2 IDs para superar la regla de desktop: #wrapper #content-wrapper { width:0 } */
  #wrapper #content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }
}

/* ===== Overlay + botón de cierre ===== */
@media (max-width: 992px) {
  /* overlay */
  #sb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.28);
    z-index: 1039;              /* debajo del sidebar (1040) */
  }
  /* visible solo cuando el sidebar está abierto */
  body:not(.sidebar-toggled) #sb-overlay { display: block; }
  body.sidebar-toggled #sb-overlay { display: none; }

  /* botón X dentro del sidebar */
  #accordionSidebar .sb-close {
    position: absolute;
    right: .5rem;
    top: .5rem;
    font-size: 2rem;
    line-height: 1;
    background: transparent;
    border: 0;
    color: #fff;
    opacity: .9;
    z-index: 1041;
  }
  #accordionSidebar .sb-close:active { transform: scale(.96); }
}

/* ===== 1) Menú legible en DESKTOP: permitir salto de línea ===== */
.sidebar .nav-item .nav-link,
.sidebar .nav-item .collapse .collapse-item {
  display: flex;
  align-items: center;
  gap: .5rem;              /* separa icono y texto */
  line-height: 1.2;
}

/* El texto del label puede ocupar 2 líneas */
.sidebar .nav-item .nav-link span,
.sidebar .nav-item .collapse .collapse-item span {
  white-space: normal !important;   /* antes venía forzado a una sola línea */
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;           /* por si hay palabras largas */
  max-width: 100%;
}

/* Evitar que el contenedor del submenú recorte contenido */
.sidebar .nav-item .collapse {
  overflow: visible;
}
.sidebar .nav-item .collapse .collapse-inner {
  overflow: visible;
  white-space: normal;
}

/* Si usás la clase utilitaria .text-truncate en los items de menú, anúlala SOLO en el sidebar */
.sidebar .text-truncate {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

/* ===== 2) Mobile: un poco más de ancho para que no corte ===== */
@media (max-width: 992px) {
  :root { --sbw: clamp(260px, 82vw, 320px); } /* antes 240px; ajustable */
  #accordionSidebar { width: var(--sbw) !important; }

  /* Dentro del submenú, también permitimos 2 líneas */
  #accordionSidebar .nav-item .nav-link span,
  #accordionSidebar .nav-item .collapse .collapse-item span {
    font-size: 0.98rem;    /* leve ajuste tipográfico */
  }
}

/* #sidebarToggle es el único toggle — visible en todos los tamaños */
#sidebarToggle { display: inline-flex !important; }

/* ═══════════════════════════════════════════════════════════
   NAVBAR REDESIGN v2025
   Modern sidebar + topbar — inspired by Linear / Vercel
═══════════════════════════════════════════════════════════ */

/* ── Section labels ─────────────────────────────────────── */
.nb-section {
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  padding: 10px 20px 2px;
  display: block;
  pointer-events: none;
  user-select: none;
}
.sidebar.toggled .nb-section { display: none; }

/* ── Icon containers ────────────────────────────────────── */
.nb-icon {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.sidebar .nav-link:hover .nb-icon,
.sidebar .nav-link[aria-expanded="true"] .nb-icon { transform: scale(1.1); }
.sidebar.toggled .nb-icon { width: 18px; height: 18px; border-radius: 5px; font-size: .62rem; }

/* Icon color — all white to match nav text */
.nb-icon { background:transparent !important; color:rgba(255,255,255,.7) !important; margin-right:4px; }
.sidebar .nav-link:hover .nb-icon { color:#fff !important; }

/* ── Second navbar (fixed, opens right of sidebar) ────────────────── */
.nb2 {
  position:fixed; top:0; bottom:0; width:200px;
  background:#1c2536; border-right:1px solid rgba(255,255,255,.05);
  z-index:1035; display:flex; flex-direction:column;
  left:0; transform:translateX(-200px); visibility:hidden;
  transition:transform .2s ease, visibility 0s .2s;
}
.nb2.open { visibility:visible; transition:transform .2s ease, visibility 0s; }

.nb2-header {
  display:flex; align-items:center; justify-content:space-between;
  height:54px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
  background:#0a0f1a;
}
.nb2-title { font-size:.8rem; font-weight:800; color:rgba(255,255,255,.85); }
.nb2-close { background:none; border:none; color:rgba(255,255,255,.4); cursor:pointer; font-size:.9rem; padding:4px; border-radius:6px; display:none; }
.nb2-close:hover { color:#fff; background:rgba(255,255,255,.08); }

.nb2-items { flex:1; overflow-y:auto; padding:12px 10px; }
.nb2-items a {
  display:flex; align-items:center; gap:10px;
  padding:7px 12px; border-radius:8px; margin-bottom:1px;
  font-size:.8rem; font-weight:600; color:rgba(255,255,255,.6);
  text-decoration:none; transition:background .12s, color .12s;
}
.nb2-items a:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.nb2-items a.nb2-item-active { background:rgba(255,255,255,.08); color:#fff; border-left:2px solid #60a5fa; }
.nb2-items a.nb2-item-active i { opacity:1; }
.nb2-items a small { display:block; font-size:.58rem; font-weight:400; color:rgba(255,255,255,.3); margin-top:1px; line-height:1.2; }
.nb2-items a i { font-size:.75rem; width:18px; text-align:center; flex-shrink:0; opacity:.5; }
.nb2-items a:hover i { opacity:1; }

/* Active category highlight */
.nb2-active > a.nav-link { background:rgba(255,255,255,.08) !important; border-radius:8px; }


/* Forzar sidebar colapsado por defecto */
#accordionSidebar {
  width:54px !important; min-width:54px !important; max-width:54px !important;
  overflow:visible !important; transition:width .2s ease, min-width .2s ease, max-width .2s ease;
  display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important;
  height:100vh !important; min-height:100vh !important;
  position:fixed !important; top:0 !important; left:0 !important;
  overflow-y:hidden !important;
}
#accordionSidebar > .nav-item { flex-shrink:0; }
#accordionSidebar > .nav-item:last-child { padding-bottom:12px; }

body:not(.nb1-expanded) #accordionSidebar .nav-link > span:not(.nb-icon) {
  display:none !important;
}
body:not(.nb1-expanded) #accordionSidebar .sb-name { display:none !important; }
#accordionSidebar .nb-section { display:none !important; }
#accordionSidebar .sidebar-brand { padding:0 10px !important; justify-content:center !important; }
#accordionSidebar > .nav-item > .nav-link {
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:6px 8px !important;
  border-radius:10px !important;
}
#sidebarToggle, .sb-topbar-toggle { display:none !important; }

/* Sidebar expandido */
body.nb1-expanded #accordionSidebar {
  width:170px !important; min-width:170px !important; max-width:170px !important;
}
body.nb1-expanded #accordionSidebar > .nav-item > .nav-link {
  width:auto !important; height:auto !important;
  padding:8px 12px !important; justify-content:flex-start !important;
  gap:10px !important;
}
body.nb1-expanded #accordionSidebar .nav-link > span:not(.nb-icon) {
  display:inline !important;
  font-size:.8rem !important; font-weight:500 !important; color:rgba(255,255,255,.55) !important;
  white-space:nowrap !important;
}
body.nb1-expanded #accordionSidebar .sb-name { display:block !important; }
body.nb1-expanded #accordionSidebar .sidebar-brand { padding:0 14px !important; justify-content:flex-start !important; }
body.nb1-expanded #accordionSidebar .nav-link { justify-content:flex-start !important; padding:8px 12px !important; }
body.nb1-expanded .nb2 { left:170px !important; }
body.nb1-expanded #nb1ToggleIcon { transform:rotate(180deg); }

/* Parametría box icon */
#accordionSidebar *:not(.sb-avatar), #accordionSidebar *::before, #accordionSidebar *::after {
  border:0 !important; outline:0 !important; box-shadow:none !important;
}
#accordionSidebar .sb-avatar {
  box-shadow: none !important;
}
#accordionSidebar .sidebar-brand {
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  background:#0a0f1a !important;
  justify-content:center !important;
  padding:0 8px !important;
}

body #accordionSidebar .nb1-expand-btn.nav-link { justify-content:center !important; padding:8px 0 !important; display:flex !important; width:100% !important; }
body.nb1-expanded #accordionSidebar .nb1-expand-btn.nav-link { justify-content:center !important; }


/* Segundo navbar siempre visible (desktop > 992px) */
@media (min-width: 993px) {
  .nb2 { left:54px !important; transform:translateX(0) !important; visibility:visible !important; }
  #content-wrapper { margin-left:254px !important; transition:margin-left .2s ease; padding-top:54px !important; }
  body.nb1-expanded #content-wrapper { margin-left:370px !important; }
  body.nb1-expanded .topbar { left:370px !important; }
}

/* ── Nav link active: left border accent ────────────────── */
.sidebar .nav-item .nav-link[aria-expanded="true"],
.sidebar .nav-item.active > .nav-link {
  background: rgba(96,165,250,.1) !important;
  color: #fff !important;
  border-left: 2px solid #60a5fa !important;
  padding-left: calc(.75rem - 2px) !important;
  box-shadow: none !important;
}

/* ── Submenu panel ──────────────────────────────────────── */
.sidebar .collapse-inner,
.sidebar .collapsing .collapse-inner {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 10px !important;
  margin: 2px 10px 6px !important;
  padding: 4px !important;
}

/* ── Submenu items ──────────────────────────────────────── */
.sidebar .collapse .collapse-item {
  font-size: .77rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 7px 12px 7px 14px !important;
  color: rgba(255,255,255,.55) !important;
  transition: background .12s, color .12s, padding-left .1s !important;
  position: relative !important;
}
.sidebar .collapse .collapse-item:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.9) !important;
  padding-left: 18px !important;
}
.sidebar .collapse .collapse-item.active,
.sidebar .collapse .collapse-item[aria-current="page"] {
  background: rgba(96,165,250,.12) !important;
  color: #93c5fd !important;
  box-shadow: inset 2px 0 0 #60a5fa !important;
}

/* ── Tooltip on collapsed sidebar ──────────────────────── */
.sidebar.toggled .nav-item .nav-link[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 90px;
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #e2e8f0;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
  z-index: 9999;
  pointer-events: none;
}

/* ── Topbar backdrop ────────────────────────────────────── */
.topbar {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background: var(--sidebar-bg, #0e141b) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: none !important;
}
body[data-theme="dark"] .topbar {
  background: var(--sidebar-bg, #0e141b) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}

/* Topbar nav links */
.topbar .nav-link {
  color: rgba(255,255,255,.6) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  height: 36px !important;
  border-radius: 8px !important;
  transition: background .12s, color .12s !important;
}
.topbar .nav-link:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }

/* Topbar icons */
.topbar .nav-link i.bi { font-size: 1rem !important; }

/* Badge counter */
.badge-counter,
.topbar .nav-item .nav-link .badge-counter,
.sidebar .nav-item .nav-link .badge-counter {
  min-width: 16px !important;
  height: 16px !important;
  font-size: .55rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 0 3px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: -5px !important;
  right: -5px !important;
  position: absolute !important;
  border: 2px solid #fff !important;
  background: var(--ds-blue, #4e73df) !important;
  color: #fff !important;
  transform: none !important;
  transform-origin: unset !important;
}
body[data-theme="dark"] .badge-counter { border-color: rgba(15,23,42,.95) !important; }

/* User section */
.img-profile {
  width: 32px !important; height: 32px !important;
  border-radius: 9px !important;
  border: 2px solid rgba(78,115,223,.25) !important;
  object-fit: cover !important;
}
#userDropdown .mr-2 {
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}
body[data-theme="dark"] #userDropdown .mr-2 { color: #e2e8f0 !important; }

/* ── Notification dropdown ──────────────────────────────── */
.dropdown-list.dropdown-menu {
  border: 1.5px solid rgba(226,232,240,.9) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.16) !important;
  overflow: hidden !important;
  min-width: 350px !important;
  padding: 0 !important;
  margin-top: 10px !important;
}
body[data-theme="dark"] .dropdown-list.dropdown-menu {
  border-color: rgba(255,255,255,.1) !important;
  background: #1e293b !important;
}

.dropdown-list .dropdown-header {
  background: linear-gradient(135deg, #1a3a6b, #2952c0 60%, #4338ca) !important;
  color: rgba(255,255,255,.95) !important;
  font-size: .6rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
}

#notifScroll .dropdown-item {
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(226,232,240,.7) !important;
  border-radius: 0 !important;
  transition: background .12s !important;
}
#notifScroll .dropdown-item:hover { background: rgba(78,115,223,.05) !important; }
body[data-theme="dark"] #notifScroll .dropdown-item {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
body[data-theme="dark"] #notifScroll .dropdown-item:hover {
  background: rgba(78,115,223,.1) !important;
}

.dropdown-list a[href*="notificaciones"].dropdown-item {
  font-size: .72rem !important;
  font-weight: 800 !important;
  color: #4e73df !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
  text-align: center !important;
  letter-spacing: .02em !important;
  display: block !important;
}
.dropdown-list a[href*="notificaciones"].dropdown-item:hover {
  background: rgba(78,115,223,.06) !important;
  color: #224abe !important;
}

/* ── User dropdown ──────────────────────────────────────── */
.dropdown-menu[aria-labelledby="userDropdown"] {
  border: 1.5px solid rgba(226,232,240,.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.14) !important;
  min-width: 215px !important;
  padding: 6px !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}
body[data-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] {
  border-color: rgba(255,255,255,.1) !important;
  background: #1e293b !important;
}
.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item {
  border-radius: 8px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  color: #374151 !important;
  transition: background .12s !important;
}
.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item:hover {
  background: rgba(78,115,223,.07) !important;
  color: #1e293b !important;
}
body[data-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item {
  color: #e2e8f0 !important;
}
body[data-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item:hover {
  background: rgba(255,255,255,.07) !important;
}
.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-divider {
  margin: 5px 0 !important;
  border-top-color: rgba(226,232,240,.7) !important;
}
body[data-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-divider {
  border-top-color: rgba(255,255,255,.08) !important;
}

/* Feedback button */
#btnFeedbackTop {
  border-radius: 8px !important;
  font-size: .7rem !important;
  padding: 4px 10px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Topbar dividers */
.topbar-divider {
  width: 0 !important;
  border-right: 1px solid rgba(0,0,0,.1) !important;
  height: 24px !important;
  margin: auto 10px !important;
}
body[data-theme="dark"] .topbar-divider {
  border-right-color: rgba(255,255,255,.1) !important;
}

/* Hide ugly topbar divider between items when unnecessary */
.topbar .topbar-divider + .topbar-divider { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   NAVBAR REDESIGN v3 — World-class polish
═══════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────── */
#accordionSidebar {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
#accordionSidebar.toggled {
  overflow: hidden !important;
}
#accordionSidebar::before { display:none; }

/* ── Brand: avatar + workspace name ─────────────────────── */
.sidebar-brand {
  padding: 0 16px !important;
  height: 54px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 11px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
}
.sb-avatar {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .92rem; font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(99,102,241,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-right: 10px;
}
.sb-name {
  font-size: .81rem; font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 158px;
  line-height: 1.3;
}
.sidebar.toggled .sb-name { display: none; }
.sidebar.toggled .sidebar-brand {
  justify-content: center !important;
  gap: 0 !important;
  padding: 14px 8px !important;
}

/* ── Icon containers: more vibrant ─────────────────────── */
.nb-i-home  { background: rgba(96,165,250,.26);  color: #93c5fd; }
.nb-i-crm   { background: rgba(52,211,153,.24);  color: #6ee7b7; }
.nb-i-hr    { background: rgba(167,139,250,.26); color: #c4b5fd; }
.nb-i-fin   { background: rgba(251,191,36,.24);  color: #fcd34d; }
.nb-i-ops   { background: rgba(248,113,113,.24); color: #fca5a5; }
.nb-i-prc   { background: rgba(251,146,60,.24);  color: #fdba74; }
.nb-i-chat  { background: rgba(56,189,248,.24);  color: #7dd3fc; }
.nb-i-rep   { background: rgba(74,222,128,.24);  color: #86efac; }
.nb-i-subs  { background: rgba(232,121,249,.24); color: #f5d0fe; }

/* ── Nav link: hover glow ───────────────────────────────── */
.sidebar .nav-item .nav-link:hover {
  background: rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
.sidebar .nav-item .nav-link:hover .nb-icon { transform: scale(1.13) !important; }

/* ── Active state: gradient + glow + left accent ────────── */
.sidebar .nav-item .nav-link[aria-expanded="true"],
.sidebar .nav-item.active > .nav-link {
  background: linear-gradient(90deg, rgba(96,165,250,.22) 0%, rgba(96,165,250,.04) 100%) !important;
  border-left: 2.5px solid #60a5fa !important;
  padding-left: calc(.75rem - 2.5px) !important;
  box-shadow: 0 0 18px rgba(96,165,250,.18), inset 0 0 0 1px rgba(96,165,250,.1) !important;
  color: #fff !important;
}

/* ── Section labels ─────────────────────────────────────── */
.nb-section { color: rgba(255,255,255,.30); }

/* ── Submenus: dark glassmorphism ───────────────────────── */
.sidebar .collapse-inner,
.sidebar .collapsing .collapse-inner {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

/* ── Topbar: hide the inner <hr> that creates ugly divider ─ */
.topbar hr.sidebar-divider { display: none !important; }
/* Hide br inside topbar-divider */
.topbar .topbar-divider br { display: none !important; }
/* Remove margin-bottom from topbar (mb-4) */
#topbar.mb-4 { margin-bottom: 1.5rem !important; }

/* ── Feedback & admin buttons: ghost icon pill ──────────── */
#btnFeedbackTop,
.topbar a.btn.btn-success,
.topbar .btn.btn-success,
.topbar a[href*="admin_dashboard"].btn {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  font-size: .88rem !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  color: #64748b !important;
  box-shadow: none !important;
  transition: background .13s, color .13s, border-color .13s, box-shadow .13s !important;
  line-height: 1 !important;
  margin-right: 4px !important;
}
#btnFeedbackTop:hover,
.topbar a.btn.btn-success:hover,
.topbar .btn.btn-success:hover,
.topbar a[href*="admin_dashboard"].btn:hover {
  background: rgba(78,115,223,.09) !important;
  border-color: rgba(78,115,223,.35) !important;
  color: #4e73df !important;
  box-shadow: 0 0 0 3px rgba(78,115,223,.12) !important;
}
body[data-theme="dark"] #btnFeedbackTop,
body[data-theme="dark"] .topbar a.btn.btn-success,
body[data-theme="dark"] .topbar .btn.btn-success,
body[data-theme="dark"] .topbar a[href*="admin_dashboard"].btn {
  border-color: rgba(255,255,255,.13) !important;
  color: #94a3b8 !important;
}
body[data-theme="dark"] #btnFeedbackTop:hover,
body[data-theme="dark"] .topbar a.btn.btn-success:hover,
body[data-theme="dark"] .topbar .btn.btn-success:hover {
  background: rgba(96,165,250,.13) !important;
  border-color: rgba(96,165,250,.4) !important;
  color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.1) !important;
}

/* ── Notification bell: contained rounded button ───────── */
#notificacionesDropdown .nav-link {
  width: 36px !important;
  height: 36px !important;
  background: rgba(0,0,0,.05) !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: .97rem !important;
  transition: background .12s, border-color .12s, box-shadow .12s !important;
}
#notificacionesDropdown .nav-link:hover {
  background: rgba(78,115,223,.09) !important;
  border-color: rgba(78,115,223,.3) !important;
  box-shadow: 0 0 0 3px rgba(78,115,223,.1) !important;
}
body[data-theme="dark"] #notificacionesDropdown .nav-link {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #94a3b8 !important;
}
body[data-theme="dark"] #notificacionesDropdown .nav-link:hover {
  background: rgba(96,165,250,.15) !important;
  border-color: rgba(96,165,250,.4) !important;
  color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.1) !important;
}

/* ── User dropdown trigger: pill container ───────────────── */
#userDropdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(0,0,0,.05) !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  border-radius: 10px !important;
  padding: 4px 10px !important;
  transition: background .12s, border-color .12s, box-shadow .12s !important;
  height: 36px !important;
}
#userDropdown:hover {
  background: rgba(78,115,223,.07) !important;
  border-color: rgba(78,115,223,.25) !important;
  box-shadow: 0 0 0 3px rgba(78,115,223,.08) !important;
}
body[data-theme="dark"] #userDropdown {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.1) !important;
}
body[data-theme="dark"] #userDropdown:hover {
  background: rgba(96,165,250,.13) !important;
  border-color: rgba(96,165,250,.35) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.1) !important;
}

/* ── Theme picker button: same ghost style ──────────────── */
.topbar .btn[data-target="#themePickerModal"] {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  color: #64748b !important;
  transition: background .12s, color .12s, border-color .12s !important;
}
.topbar .btn[data-target="#themePickerModal"]:hover {
  background: rgba(78,115,223,.09) !important;
  border-color: rgba(78,115,223,.3) !important;
  color: #4e73df !important;
}
body[data-theme="dark"] .topbar .btn[data-target="#themePickerModal"] {
  border-color: rgba(255,255,255,.13) !important;
  color: #94a3b8 !important;
}
body[data-theme="dark"] .topbar .btn[data-target="#themePickerModal"]:hover {
  background: rgba(96,165,250,.13) !important;
  border-color: rgba(96,165,250,.4) !important;
  color: #93c5fd !important;
}
/* ── Help-switch: fix vertical alignment in topbar ─────── */
.navbar-nav .d-inline-flex[class*="align-items-center"] {
  margin-bottom: 0 !important;
  align-items: center !important;
}
.navbar-nav .d-inline-flex label.small {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  letter-spacing: .02em !important;
}
body[data-theme="dark"] .navbar-nav .d-inline-flex label.small {
  color: #94a3b8 !important;
}

/* ── Topbar: right-section nav vertical center ──────────── */
.topbar .navbar-nav { align-items: center !important; }
.topbar .navbar-nav > li { display: flex; align-items: center; }

/* ── Sidebar bottom logos ────────────────────────────────── */
.sidebar .logo.logo-full {
  display: block;
  max-width: 120px;
  margin: 16px auto 8px;
  opacity: .55;
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
.sidebar .logo.logo-mini {
  display: block;
  width: 32px; height: 32px;
  margin: 12px auto 8px;
  opacity: .5;
  filter: brightness(0) invert(1);
}
.sidebar.toggled .logo.logo-full { display: none; }
.sidebar:not(.toggled) .logo.logo-mini { display: none; }

/* ── Fix: icon centering inside nb-icon containers ─────── */
.nb-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.nb-icon > i,
.nb-icon > i.bi {
  width: auto !important;
  min-width: unset !important;
  text-align: center !important;
  line-height: 1 !important;
  display: block !important;
  margin: 0 !important;
  font-size: .88rem !important;
}

/* ── Fix: submenu item text wrapping (long labels) ──────── */
.sidebar .collapse .collapse-item {
  white-space: normal !important;
  line-height: 1.4 !important;
  align-items: flex-start !important;
  word-break: break-word !important;
}
.sidebar .collapse .collapse-item i {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE TOGGLE BUTTON
═══════════════════════════════════════════════════════════ */

/* #sidebarToggle ya se muestra globalmente (ver regla anterior) */

/* Wrapper: sticks to bottom of sidebar, centered */
.sb-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: auto;
}

/* Button itself */
.sb-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  outline: none;
}
.sb-toggle-btn:hover {
  background: rgba(96,165,250,.18);
  border-color: rgba(96,165,250,.4) !important;
  color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(96,165,250,.1);
}
.sb-toggle-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(96,165,250,.2); }

/* Icon: smooth rotation when sidebar is collapsed */
.sb-toggle-icon {
  font-size: .82rem;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: block;
  line-height: 1;
}
.sidebar.toggled .sb-toggle-icon {
  transform: rotate(180deg);
}

/* Collapsed state: center the toggle button */
.sidebar.toggled .sb-toggle-wrap {
  padding: 10px 0 14px;
}

/* ── Topbar sidebar toggle button ───────────────────────── */
.sb-topbar-toggle {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  color: #64748b !important;
  cursor: pointer !important;
  flex-shrink: 0;
  transition: background .13s, color .13s, border-color .13s, box-shadow .13s !important;
  margin-left: 4px !important;
}
.sb-topbar-toggle:hover {
  background: rgba(78,115,223,.09) !important;
  border-color: rgba(78,115,223,.35) !important;
  color: #4e73df !important;
  box-shadow: 0 0 0 3px rgba(78,115,223,.1) !important;
}
.sb-topbar-toggle:focus { outline: none !important; }
body[data-theme="dark"] .sb-topbar-toggle {
  border-color: rgba(255,255,255,.13) !important;
  color: #94a3b8 !important;
}
body[data-theme="dark"] .sb-topbar-toggle:hover {
  background: rgba(96,165,250,.13) !important;
  border-color: rgba(96,165,250,.4) !important;
  color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.1) !important;
}

/* Icon rotation: expanded=normal, collapsed=mirrored */
.sb-topbar-toggle .sb-toggle-icon {
  font-size: .92rem;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: block;
  line-height: 1;
  width: auto !important;
  min-width: unset !important;
  margin: 0 !important;
}
body.sidebar-toggled .sb-topbar-toggle .sb-toggle-icon {
  transform: rotate(180deg);
}

/* ── Notificaciones dropdown redesign ──────────────────────────────────── */
@keyframes notifDropIn {
  from { opacity:0; transform: translateY(-8px) scale(.97); }
  to   { opacity:1; transform: translateY(0)    scale(1);   }
}
@keyframes notifItemIn {
  from { opacity:0; transform: translateX(-10px); }
  to   { opacity:1; transform: translateX(0); }
}
@keyframes bellPulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-blue) 40%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ds-blue) 0%, transparent); }
}

#notificacionesDropdown .dropdown-menu {
  width: 370px !important;
  max-width: 95vw !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1) !important;
  overflow: hidden !important;
  animation: notifDropIn .22s cubic-bezier(.22,1,.36,1) both !important;
  margin-top: 10px !important;
}
body[data-theme="dark"] #notificacionesDropdown .dropdown-menu {
  background: #1e293b !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3) !important;
}

/* Header */
.notif-header {
  background: linear-gradient(135deg, var(--ds-blue) 0%, var(--ds-blue-2, #224abe) 100%);
  padding: 16px 18px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.notif-header-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #fff; flex-shrink: 0;
}
.notif-header-title { flex: 1; min-width: 0; }
.notif-header-title h6 {
  margin: 0; font-size: .82rem; font-weight: 800;
  color: #fff; letter-spacing: .01em;
}
.notif-header-title small { font-size: .65rem; color: rgba(255,255,255,.7); }
.notif-header-count {
  min-width: 22px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,.25);
  color: #fff; font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; flex-shrink: 0;
}
.notif-marcar-btn {
  background: rgba(255,255,255,.18); border: none; border-radius: 8px;
  color: #fff; font-size: .6rem; font-weight: 700;
  padding: 4px 8px; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.notif-marcar-btn:hover { background: rgba(255,255,255,.3); }

/* Scroll area */
#notifScroll {
  max-height: 320px;
  overflow-y: auto;
  background: var(--page-card-bg, #fff);
}
#notifScroll::-webkit-scrollbar { width: 4px; }
#notifScroll::-webkit-scrollbar-track { background: transparent; }
#notifScroll::-webkit-scrollbar-thumb { background: var(--ds-border, #e3e6f0); border-radius: 99px; }

/* Items */
.notif-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 16px;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ds-border, #f1f3f9);
  transition: background .13s;
  position: relative;
  animation: notifItemIn .25s cubic-bezier(.22,1,.36,1) both;
}
.notif-item:hover { background: color-mix(in srgb, var(--ds-blue) 5%, transparent) !important; }
.notif-item.notif-unread {
  background: color-mix(in srgb, var(--ds-blue) 4%, var(--page-card-bg, #fff)) !important;
  border-left: 3px solid var(--ds-blue);
}
.notif-item.notif-unread:hover { background: color-mix(in srgb, var(--ds-blue) 9%, transparent) !important; }
body[data-theme="dark"] .notif-item { border-bottom-color: rgba(255,255,255,.07); }
body[data-theme="dark"] .notif-item.notif-unread { background: color-mix(in srgb, var(--ds-blue) 10%, #1e293b) !important; }

.notif-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0; margin-top: 1px;
}
.notif-body { flex: 1; min-width: 0; }
.notif-text {
  font-size: .74rem; font-weight: 600; line-height: 1.4;
  color: var(--ds-text, #2d3748);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body[data-theme="dark"] .notif-text { color: #cbd5e1; }
.notif-text b { font-weight: 800; }
.notif-time { font-size: .62rem; color: var(--ds-muted, #94a3b8); margin-top: 3px; }
.notif-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-blue); flex-shrink: 0; margin-top: 6px;
}

/* Empty state */
.notif-empty {
  padding: 36px 16px;
  text-align: center;
  background: var(--page-card-bg, #fff);
}
body[data-theme="dark"] .notif-empty { background: #1e293b; }
.notif-empty i { font-size: 2rem; opacity: .18; color: var(--ds-blue); display: block; margin-bottom: 10px; }
.notif-empty p { font-size: .75rem; color: var(--ds-muted, #94a3b8); margin: 0; }

/* Footer */
.notif-footer {
  padding: 10px 16px;
  background: var(--page-card-bg, #fff);
  border-top: 1px solid var(--ds-border, #e3e6f0);
  text-align: center;
}
body[data-theme="dark"] .notif-footer { background: #1e293b; border-top-color: rgba(255,255,255,.07); }
.notif-footer a {
  font-size: .7rem; font-weight: 700;
  color: var(--ds-blue) !important;
  text-decoration: none !important;
  letter-spacing: .01em;
}
.notif-footer a:hover { text-decoration: underline !important; }

/* Bell pulse cuando hay no leídas */
.bell-has-unread {
  animation: bellPulse 2s ease-in-out infinite;
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE + TABLET RESPONSIVE — drawer único (<=992px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {

  /* Sidebar desktop: oculto */
  #accordionSidebar { display: none !important; }

  /* nb2 desktop: oculto */
  .nb2 { display: none !important; }

  /* Content: full-width */
  #content-wrapper { margin-left: 0 !important; width: 100% !important; }
  body.nb1-expanded #content-wrapper { margin-left: 0 !important; }

  /* Topbar: hide desktop toggle, show mobile toggle */
  #sidebarToggle, .sb-topbar-toggle { display: none !important; }
  #mobileDrawerToggle {
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    width: 38px !important; height: 38px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important; border-radius: 10px !important;
    color: #fff !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    margin-left: 4px !important;
  }
  #mobileDrawerToggle:active { background: rgba(255,255,255,.15) !important; }
  #topbar { margin-left: 0 !important; left: 0 !important; }

  /* ── Mobile drawer ── */
  .mobile-drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 100vw;
    background: #0a0f1a;
    z-index: 1050;
    display: flex !important; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
  }
  body.mobile-drawer-open .mobile-drawer { transform: translateX(0); }
  /* Overlay */
  .mobile-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1049;
    display: none !important;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  body.mobile-drawer-open .mobile-drawer-overlay { display: block !important; }

  /* ── Header ── */
  .mdw-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    flex-shrink: 0;
  }
  .mdw-header .sidebar-brand-text {
    color: #fff; font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em;
  }
  .mdw-close {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: none;
    color: rgba(255,255,255,.6); font-size: .9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .mdw-close:active { background: rgba(255,255,255,.15); }

  /* ── Categories: horizontal scroll ── */
  .mdw-cats {
    display: flex; gap: 8px;
    padding: 0 20px 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    scrollbar-width: none;
  }
  .mdw-cats::-webkit-scrollbar { display: none; }
  .mdw-cat {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.06); border: 1.5px solid transparent;
    border-radius: 99px; padding: 8px 16px;
    font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.5);
    cursor: pointer; transition: all .15s;
    white-space: nowrap; flex-shrink: 0;
  }
  .mdw-cat i { font-size: .82rem; }
  .mdw-cat:active { transform: scale(.96); }
  .mdw-cat.active {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: #fff;
  }

  /* ── Separator ── */
  .mdw-sep {
    height: 1px; background: rgba(255,255,255,.06);
    margin: 0 20px;
    flex-shrink: 0;
  }

  /* ── Items: scrollable list ── */
  .mdw-items {
    flex: 1; overflow-y: auto; padding: 12px 14px;
    -webkit-overflow-scrolling: touch;
  }
  .mdw-items a {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 14px; margin-bottom: 4px;
    text-decoration: none; transition: background .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .mdw-items a:active { background: rgba(255,255,255,.07); }
  .mdw-items a:hover { text-decoration: none; }
  .mdw-item-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.07);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; color: rgba(255,255,255,.6);
    flex-shrink: 0;
  }
  .mdw-item-text { flex: 1; min-width: 0; }
  .mdw-item-text span {
    display: block; font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.85);
    line-height: 1.2;
  }
  .mdw-item-text small {
    display: block; font-size: .68rem; font-weight: 400; color: rgba(255,255,255,.35);
    margin-top: 2px;
  }
  .mdw-item-arrow {
    color: rgba(255,255,255,.15); font-size: .7rem; flex-shrink: 0;
  }
}
/* Hide mobile elements on desktop */
.mobile-drawer, .mobile-drawer-overlay, .mobile-drawer-toggle { display: none; }
@media (min-width: 993px) {
  .mobile-drawer, .mobile-drawer-overlay, .mobile-drawer-toggle, #mobileDrawerToggle { display: none !important; }
}