/* ================================
     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:    #0a0f1a;       /* negro grisáceo plano (antes forzado inline) */
    --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;
    padding-top: 54px !important;   /* despeja el topbar fijo (54px) para que no tape el contenido/hero */
  }

  /* El #content-wrapper ya reserva los 54px del topbar (arriba). El hero global
     .ds-hero trae un margin-top:62px propio (dbagile-ds.css) pensado para cuando
     el wrapper NO reservaba espacio — ahora se duplicaría y empujaría el hero
     demasiado abajo. Lo neutralizamos para que quede igual que en desktop. */
  .ds-hero { margin-top: 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; }

/* Ítems cuyo ícono es un SVG inline (isotipo de marca) en vez de un glifo de bootstrap-icons.
   El SVG usa fill="currentColor", así que toma el mismo color que los demás íconos —incluido el
   cambio a blanco puro en hover— y hereda el scale(1.1) del contenedor. Queda un poco más alto
   que un glifo porque el isotipo es vertical: por eso 92% y no 100%. */
.nb-icon-svg { overflow: visible; }
.nb-icon-svg > svg {
  /* El isotipo es vertical (ratio ~0.54), así que a igual altura que un glifo cuadrado se ve
     mucho más angosto. Se lo agranda por encima de la caja de 18px para que su peso visual
     coincida con el del resto; sobresale unos px arriba y abajo, sin empujar el layout. */
  height: 132%; width: auto;
  display: block;
  fill: currentColor;
}
/* Variante por si algún ítem usa <img> en vez de SVG (logo que debe conservar su color) */
.nb-icon-img > img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  opacity: .82;
  transition: opacity .15s ease;
}
.sidebar .nav-link:hover .nb-icon-img > img { opacity: 1; }

/* ── 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; }

/* ── Scrollbar embellecida del navbar2 ─────────────────────────────────
   Reemplaza la scrollbar default del SO (gris, gruesa) que queda fea sobre
   el panel oscuro (#1c2536) cuando los items no entran (ventana baja). Fina,
   translúcida y redondeada — en línea con el resto de scrollbars custom de la app. */
.nb2-items {
  scrollbar-width: thin;                                 /* Firefox */
  scrollbar-color: rgba(255,255,255,.18) transparent;    /* thumb / track (Firefox) */
}
.nb2-items::-webkit-scrollbar { width: 6px; }
.nb2-items::-webkit-scrollbar-track { background: transparent; }
.nb2-items::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 99px;
}
.nb2-items::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

/* 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; }
}

/* ════════════════════════════════════════════════════════════════════════
   TEMA MINIMAL — navbar en BLANCO (rail #accordionSidebar + panel nb2 + topbar).
   Solo con data-theme="minimal"; dbagile y dark intactos. El nav se maneja por
   vars (--sidebar-*); acá las redefinimos a una paleta clara y pisamos los
   colores hardcodeados (#fff / #141d2e / rgba blancas) de hover/active/flyout/topbar.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="minimal"], body[data-theme="minimal"]{
  --sidebar-bg:     #ffffff;
  --sidebar-line:   #e9edf3;
  --sidebar-txt:    #475569;
  --sidebar-txt-d:  #94a3b8;
  --submenu-hover:  color-mix(in srgb, var(--page-accent,#4e73df) 9%, transparent);
  --submenu-active: color-mix(in srgb, var(--page-accent,#4e73df) 15%, transparent);
  --accent-soft:    color-mix(in srgb, var(--page-accent,#4e73df) 12%, transparent);
}

/* Fondo BLANCO explícito (no dependemos de la var por si alguna regla la pisa) */
body[data-theme="minimal"] #accordionSidebar,
body[data-theme="minimal"] .sidebar,
body[data-theme="minimal"] #topbar,
body[data-theme="minimal"] .topbar{ background:#ffffff !important; background-image:none !important; }

/* — Rail (sidebar) — */
body[data-theme="minimal"] #accordionSidebar{ border-right:1px solid var(--sidebar-line) !important; }
/* Brand: fondo blanco (pisa el #0a0f1a hardcodeado con !important del rail) */
body[data-theme="minimal"] #accordionSidebar .sidebar-brand,
body[data-theme="minimal"] .sidebar-brand{ background:#ffffff !important; border-bottom:1px solid var(--sidebar-line) !important; }
body[data-theme="minimal"] .sidebar-brand .sb-name,
body[data-theme="minimal"] .sidebar-brand{ color:#0f172a !important; }
/* El medallón .sb-avatar conserva su gradiente (acento de color, contrasta bien sobre blanco) */
/* Labels de texto del rail (expandido) y secciones: pasan de blanco a slate */
body[data-theme="minimal"] #accordionSidebar .nav-link > span:not(.nb-icon){ color:#475569 !important; }
body[data-theme="minimal"] #accordionSidebar .nav-link:hover > span:not(.nb-icon){ color:var(--page-accent,#4e73df) !important; }
body[data-theme="minimal"] .nb-section{ color:#94a3b8 !important; }
body[data-theme="minimal"] .nb-icon{ color:#475569 !important; }
/* Glyph del rail: SB Admin lo pinta rgba(255,255,255,.3) (invisible sobre blanco).
   Lo pasamos a slate sólido y opaco → cada ícono se distingue por su forma. */
body[data-theme="minimal"] #accordionSidebar .nav-link i,
body[data-theme="minimal"] #accordionSidebar .nb-icon i,
body[data-theme="minimal"] #accordionSidebar .nb-icon > i.bi{ color:#475569 !important; opacity:1 !important; }
body[data-theme="minimal"] #accordionSidebar .nav-link:hover i,
body[data-theme="minimal"] #accordionSidebar .nav-link:hover .nb-icon,
body[data-theme="minimal"] #accordionSidebar .nav-item.active > .nav-link i,
body[data-theme="minimal"] #accordionSidebar .nav-link[aria-expanded="true"] i,
body[data-theme="minimal"] #accordionSidebar .nb2-active > a.nav-link i{ color:var(--page-accent,#4e73df) !important; opacity:1 !important; }
/* Chips de íconos por categoría: tinte suave + texto saturado/oscuro (contraste sobre blanco) */
body[data-theme="minimal"] .nb-i-home { background:rgba(37,99,235,.12)  !important; color:#2563eb !important; }
body[data-theme="minimal"] .nb-i-crm  { background:rgba(5,150,105,.12)   !important; color:#059669 !important; }
body[data-theme="minimal"] .nb-i-hr   { background:rgba(124,58,237,.12)  !important; color:#7c3aed !important; }
body[data-theme="minimal"] .nb-i-fin  { background:rgba(217,119,6,.14)   !important; color:#d97706 !important; }
body[data-theme="minimal"] .nb-i-ops  { background:rgba(220,38,38,.12)   !important; color:#dc2626 !important; }
body[data-theme="minimal"] .nb-i-prc  { background:rgba(234,88,12,.13)   !important; color:#ea580c !important; }
body[data-theme="minimal"] .nb-i-chat { background:rgba(2,132,199,.12)   !important; color:#0284c7 !important; }
body[data-theme="minimal"] .nb-i-rep  { background:rgba(22,163,74,.12)   !important; color:#16a34a !important; }
body[data-theme="minimal"] .nb-i-subs { background:rgba(192,38,211,.12)  !important; color:#c026d3 !important; }
/* hover/active del rail: glow oscuro → glow claro con acento */
body[data-theme="minimal"] .sidebar .nav-item .nav-link:hover{ color:var(--page-accent,#4e73df) !important; background:var(--submenu-hover) !important; box-shadow:none !important; }
body[data-theme="minimal"] .sidebar .nav-item.active > .nav-link,
body[data-theme="minimal"] .sidebar .nav-link[aria-expanded="true"],
body[data-theme="minimal"] .sidebar .nb2-active > a.nav-link{ color:var(--page-accent,#4e73df) !important; background:var(--accent-soft) !important; box-shadow:none !important; border-left-color:var(--page-accent,#4e73df) !important; }
body[data-theme="minimal"] .sidebar.toggled .nav-item.active > .nav-link,
body[data-theme="minimal"] .sidebar.toggled .nav-item > .nav-link[aria-expanded="true"]{ background:var(--accent-soft) !important; }

/* — Flyout del rail colapsado (era #141d2e) — */
body[data-theme="minimal"] .sidebar.toggled .nav-item > .collapse,
body[data-theme="minimal"] .sidebar.toggled .nav-item > .collapsing{
  background:#fff !important; border:1px solid var(--sidebar-line) !important;
  box-shadow:0 16px 40px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.06) !important;
}
body[data-theme="minimal"] .sidebar.toggled .nav-item > .collapse[data-section]::before{ color:#94a3b8 !important; border-bottom:1px solid var(--sidebar-line) !important; }
body[data-theme="minimal"] .sidebar.toggled .collapse-item{ color:#475569 !important; }
body[data-theme="minimal"] .sidebar.toggled .collapse-item:hover{ background:var(--submenu-hover) !important; color:var(--page-accent,#4e73df) !important; }
body[data-theme="minimal"] .sidebar.toggled .collapse-item.active{ background:var(--accent-soft) !important; color:var(--page-accent,#4e73df) !important; }

/* — Panel nb2 (secundario) — */
/* Sin box-shadow: la sombra derecha del nb2 caía sobre el inicio del topbar
   (left:254px) y los separaba. Quitándola, nb2 + topbar se ven como una sola
   pieza blanca; el border-right de 1px alcanza para separar del contenido. */
body[data-theme="minimal"] .nb2{ background:#fff !important; border-right:1px solid var(--sidebar-line) !important; box-shadow:none !important; }
body[data-theme="minimal"] .nb2-header{ background:#ffffff !important; border-bottom:1px solid var(--sidebar-line) !important; }
/* Íconos nb2: la regla base les pone opacity:.5 → se ven lavados sobre blanco.
   Los hacemos opacos y slate; activo/hover en acento. */
body[data-theme="minimal"] .nb2-items a i{ color:#64748b !important; opacity:1 !important; }
body[data-theme="minimal"] .nb2-items a:hover i,
body[data-theme="minimal"] .nb2-items a.nb2-item-active i{ color:var(--page-accent,#4e73df) !important; opacity:1 !important; }
body[data-theme="minimal"] .nb2-title{ color:#0f172a !important; }
body[data-theme="minimal"] .nb2-close{ color:#94a3b8 !important; }
body[data-theme="minimal"] .nb2-close:hover{ color:#0f172a !important; background:rgba(15,23,42,.05) !important; }
body[data-theme="minimal"] .nb2-items a{ color:#475569 !important; }
body[data-theme="minimal"] .nb2-items a:hover{ background:var(--submenu-hover) !important; color:var(--page-accent,#4e73df) !important; }
body[data-theme="minimal"] .nb2-items a.nb2-item-active{ background:var(--accent-soft) !important; color:var(--page-accent,#4e73df) !important; border-left-color:var(--page-accent,#4e73df) !important; }
body[data-theme="minimal"] .nb2-items a small{ color:#94a3b8 !important; }

/* — Scrollbars claras — */
body[data-theme="minimal"] #accordionSidebar::-webkit-scrollbar-thumb,
body[data-theme="minimal"] .nb2-items::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.16) !important; }

/* — Topbar — */
body[data-theme="minimal"] .topbar,
body[data-theme="minimal"] #topbar{ color:#475569 !important; border-bottom:1px solid var(--sidebar-line) !important; }
body[data-theme="minimal"] #topbar .nav-link,
body[data-theme="minimal"] #topbar .nav-link i,
body[data-theme="minimal"] #topbar .navbar-nav .nav-item > .nav-link{ color:#475569 !important; }
body[data-theme="minimal"] #topbar .nav-link:hover,
body[data-theme="minimal"] #topbar .nav-link:hover i{ color:#0f172a !important; }
body[data-theme="minimal"] #topbar .topbar-divider{ border-color:rgba(15,23,42,.10) !important; }
/* buscador (command palette trigger) */
body[data-theme="minimal"] .tb-search-trigger{ background:rgba(15,23,42,.04) !important; border-color:rgba(15,23,42,.09) !important; color:#64748b !important; }
body[data-theme="minimal"] .tb-search-trigger:hover{ background:rgba(15,23,42,.07) !important; border-color:rgba(15,23,42,.16) !important; color:#0f172a !important; }
body[data-theme="minimal"] .tb-search-trigger i{ color:#64748b !important; }
body[data-theme="minimal"] .tb-search-kbd{ background:rgba(15,23,42,.06) !important; border-color:rgba(15,23,42,.12) !important; color:#64748b !important; }
/* toggle de colapsar sidebar */
body[data-theme="minimal"] .sb-topbar-toggle{ color:#475569 !important; }
body[data-theme="minimal"] .sb-topbar-toggle:hover{ color:#0f172a !important; background:rgba(15,23,42,.05) !important; }

/* ════════════════════════════════════════════════════════════════════════
   TEMA MINIMAL — DRAWER MOBILE (<=992px)
   El drawer mobile (.mobile-drawer) es un componente aparte del rail/nb2
   desktop, con su propio fondo oscuro (#0a0f1a) y textos blancos. Acá lo
   pasamos a la misma paleta clara para que minimal sea blanco también en
   mobile. Incluye el botón hamburguesa del topbar (era blanco/invisible
   sobre el topbar blanco). dbagile y dark quedan intactos.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  /* Botón hamburguesa en el topbar blanco */
  body[data-theme="minimal"] #mobileDrawerToggle{
    background:rgba(15,23,42,.05) !important;
    border:1px solid rgba(15,23,42,.10) !important;
    color:#475569 !important;
  }
  body[data-theme="minimal"] #mobileDrawerToggle:active{ background:rgba(15,23,42,.09) !important; }

  /* Panel del drawer */
  body[data-theme="minimal"] .mobile-drawer{ background:#ffffff !important; }
  body[data-theme="minimal"] .mobile-drawer-overlay{ background:rgba(15,23,42,.35) !important; }

  /* Header */
  body[data-theme="minimal"] .mdw-header{ border-bottom:1px solid var(--sidebar-line) !important; }
  body[data-theme="minimal"] .mdw-header .sidebar-brand-text{ color:#0f172a !important; }
  body[data-theme="minimal"] .mdw-close{ background:rgba(15,23,42,.05) !important; color:#64748b !important; }
  body[data-theme="minimal"] .mdw-close:active{ background:rgba(15,23,42,.09) !important; }

  /* Chips de categorías */
  body[data-theme="minimal"] .mdw-cat{ background:rgba(15,23,42,.04) !important; border-color:transparent !important; color:#475569 !important; }
  body[data-theme="minimal"] .mdw-cat.active{
    background:var(--accent-soft) !important;
    border-color:var(--page-accent,#4e73df) !important;
    color:var(--page-accent,#4e73df) !important;
  }

  /* Separador */
  body[data-theme="minimal"] .mdw-sep{ background:var(--sidebar-line) !important; }

  /* Items */
  body[data-theme="minimal"] .mdw-items a:active{ background:rgba(15,23,42,.05) !important; }
  body[data-theme="minimal"] .mdw-item-icon{ background:rgba(15,23,42,.05) !important; color:#64748b !important; }
  body[data-theme="minimal"] .mdw-item-text span{ color:#0f172a !important; }
  body[data-theme="minimal"] .mdw-item-text small{ color:#94a3b8 !important; }
  body[data-theme="minimal"] .mdw-item-arrow{ color:#cbd5e1 !important; }
}