/* =========================================================
   CUSTOM ERP - SIDEBAR + TOPBAR CLEAN
========================================================= */

/* -------------------------------
   TOPBAR / LAYOUT BASE
-------------------------------- */

#page-topbar {
    left: 0 !important;
    right: 0 !important;
    z-index: 1002 !important;
}

.navbar-header {
    height: 70px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.navbar-brand-box {
    width: 250px !important;
    min-width: 250px !important;
    height: 70px !important;
    background: #2a3042 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.logo,
.logo-sm,
.logo-lg {
    background: transparent !important;
}

.vertical-menu {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 250px !important;
    background: #2a3042 !important;
    z-index: 1001 !important;
    overflow: hidden !important;
}

.main-content {
    margin-left: 250px !important;
}

.footer {
    left: 250px !important;
}

/* -------------------------------
   SIDEBAR BASE - CORREGIDO
-------------------------------- */

.vertical-menu .h-100 {
    height: calc(100vh - 70px) !important;
}

/* Scroll real del sidebar */
.vertical-menu,
.vertical-menu .h-100,
.vertical-menu [data-simplebar],
.vertical-menu .simplebar-wrapper,
.vertical-menu .simplebar-mask,
.vertical-menu .simplebar-content-wrapper {
    min-height: 0 !important;
}

body:not(.vertical-collpsed) .vertical-menu .simplebar-content-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

#sidebar-menu {
    padding: 10px 0 30px !important;
}

#sidebar-menu ul,
#sidebar-menu li {
    list-style: none !important;
}

#sidebar-menu .menu-title {
    padding: 12px 24px 8px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #6a7187 !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
}

/* Padre expandido */
body:not(.vertical-collpsed) #sidebar-menu > ul > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 8px 24px !important;
    color: #a6b0cf !important;
    font-size: 14px !important;
    text-decoration: none !important;
    gap: 12px !important;
    position: relative !important;
    line-height: 1.22 !important;
}

body:not(.vertical-collpsed) #sidebar-menu > ul > li > a i {
    width: 20px !important;
    min-width: 20px !important;
    text-align: center !important;
    font-size: 18px !important;
    color: #7f89a8 !important;
    flex: 0 0 20px !important;
}

/* IMPORTANTE: no cortar nombres largos en menú expandido */
body:not(.vertical-collpsed) #sidebar-menu > ul > li > a span {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    color: inherit !important;
}

#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li.mm-active > a,
#sidebar-menu > ul > li > a.active {
    color: #ffffff !important;
}

#sidebar-menu > ul > li > a:hover i,
#sidebar-menu > ul > li.mm-active > a i,
#sidebar-menu > ul > li > a.active i {
    color: #5b73e8 !important;
}

/* Flecha */
body:not(.vertical-collpsed) #sidebar-menu > ul > li > a.has-arrow {
    padding-right: 36px !important;
}

body:not(.vertical-collpsed) #sidebar-menu > ul > li > a.has-arrow:after {
    right: 18px !important;
}

/* -------------------------------
   SUBMENÚ EXPANDIDO
-------------------------------- */

body:not(.vertical-collpsed) #sidebar-menu .sub-menu {
    position: static !important;
    display: none;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu.mm-show {
    display: block !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 18px 8px 48px !important;
    gap: 10px !important;
    color: #a6b0cf !important;
    font-size: 13px !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
    background: transparent !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a i {
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
    font-size: 15px !important;
    color: #7f89a8 !important;
    flex: 0 0 18px !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a span {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    color: inherit !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a:hover,
body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li.mm-active > a,
body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a.active {
    color: #ffffff !important;
    background: rgba(91, 115, 232, 0.16) !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a:hover i,
body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li.mm-active > a i,
body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a.active i {
    color: #5b73e8 !important;
}

#sidebar-menu .sub-menu > li > a::before {
    display: none !important;
}

/* -------------------------------
   MODO COLAPSADO - FIX FINAL
-------------------------------- */

body.vertical-collpsed .navbar-brand-box {
    width: 70px !important;
    min-width: 70px !important;
}

body.vertical-collpsed .vertical-menu {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: visible !important;
}

body.vertical-collpsed .main-content {
    margin-left: 70px !important;
}

body.vertical-collpsed .footer {
    left: 70px !important;
}

body.vertical-collpsed .vertical-menu .h-100,
body.vertical-collpsed .vertical-menu [data-simplebar],
body.vertical-collpsed .vertical-menu .simplebar-wrapper,
body.vertical-collpsed .vertical-menu .simplebar-mask,
body.vertical-collpsed .vertical-menu .simplebar-content-wrapper,
body.vertical-collpsed .vertical-menu .simplebar-content {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: visible !important;
}

body.vertical-collpsed #sidebar-menu {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding: 10px 0 30px !important;
}

body.vertical-collpsed #sidebar-menu .menu-title {
    display: none !important;
}

body.vertical-collpsed #sidebar-menu > ul,
body.vertical-collpsed #sidebar-menu > ul > li {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

body.vertical-collpsed #sidebar-menu > ul > li {
    position: relative !important;
}

/* Ícono principal centrado */
body.vertical-collpsed #sidebar-menu > ul > li > a {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > a > i {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 44px !important;
    line-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: static !important;

    font-size: 20px !important;
    text-align: center !important;
    color: #7f89a8 !important; /* color normal */
    transition: color .15s ease !important;
}

/* Hover en modo contraído */
body.vertical-collpsed #sidebar-menu > ul > li > a:hover > i {
    color: #5b73e8 !important;
}

/* Activo/seleccionado en modo contraído */
body.vertical-collpsed #sidebar-menu > ul > li.mm-active > a > i,
body.vertical-collpsed #sidebar-menu > ul > li > a.active > i,
body.vertical-collpsed #sidebar-menu > ul > li.mm-active > a:hover > i {
    color: #5b73e8 !important;
}
/* Título del módulo en modo colapsado - FIX ESTABLE
   Ya no dependemos del <span>, usamos attr(title) del <a> padre */
body.vertical-collpsed #sidebar-menu > ul > li > a > span {
    display: none !important;
}

/* Evita que la flecha del template se meta en el flyout */
body.vertical-collpsed #sidebar-menu > ul > li > a.has-arrow:after {
    display: none !important;
}

/* -------------------------------
   Scroll del sidebar CONTRAÍDO
   (rueda / trackpad / touch; barra oculta). Los flyouts son
   position:fixed, así que no los recorta el overflow.
-------------------------------- */
body.vertical-collpsed .vertical-menu .simplebar-content-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.vertical-collpsed .vertical-menu .simplebar-content-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.vertical-collpsed .vertical-menu .simplebar-track {
    display: none !important;
}

/* -------------------------------
   FLYOUT (sidebar contraído) — tarjeta flotante
   Posición/altura las calcula el script de partials/footer.php
   (--nx-fly-top / --nx-fly-left / --nx-fly-maxh) para que quede
   siempre dentro de la ventana. Se abre con la clase li.nx-fly-open.
-------------------------------- */

/* La cabecera ahora es el <li class="flyout-header"> del flyout (no el ::before) */
body.vertical-collpsed #sidebar-menu > ul > li > a.has-arrow::before,
body.vertical-collpsed #sidebar-menu > ul > li:hover > a.has-arrow::before {
    content: none !important;
    display: none !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    position: fixed !important;
    top: var(--nx-fly-top, 0px) !important;
    left: var(--nx-fly-left, 70px) !important;
    right: auto !important;
    bottom: auto !important;

    width: 270px !important;
    min-width: 240px !important;
    max-width: min(330px, calc(100vw - 110px)) !important;
    height: auto !important;
    max-height: var(--nx-fly-maxh, calc(100vh - 24px)) !important;

    background: var(--nx-fly-bg, #2a3042) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(8, 12, 28, .38), 0 3px 10px rgba(8, 12, 28, .22) !important;
    z-index: 100001 !important;

    padding: 0 0 6px !important;
    margin: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(166, 176, 207, .35) transparent;

    transition: none !important;
    animation: none !important;
    box-sizing: border-box !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu::-webkit-scrollbar {
    width: 6px;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu::-webkit-scrollbar-thumb {
    background: rgba(166, 176, 207, .3);
    border-radius: 6px;
}

/* Abierto por el script (hover con pequeño retardo de cierre) o por teclado */
body.vertical-collpsed #sidebar-menu > ul > li.nx-fly-open > ul.sub-menu,
body.vertical-collpsed #sidebar-menu > ul > li:focus-within > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: nxFlyIn .14s ease-out !important;
}

@keyframes nxFlyIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Aunque metisMenu marque mm-show/mm-active, en modo contraído solo se abre con hover */
body.vertical-collpsed #sidebar-menu > ul > li.mm-active > ul.sub-menu,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu.mm-show {
    display: block !important;
}

/* Ningún overflow del padre debe cortar el flyout */
body.vertical-collpsed #sidebar-menu > ul > li,
body.vertical-collpsed #sidebar-menu > ul > li > a {
    overflow: visible !important;
}

/* Cabecera del flyout: título del módulo, fija al hacer scroll interno */
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li.flyout-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    margin: 0 0 6px !important;

    background: var(--nx-fly-bg, #2a3042) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    box-sizing: border-box !important;

    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li.flyout-header > i {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(91, 115, 232, .18) !important;
    color: #7c91f0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li.flyout-header > span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Items del flyout */
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li:not(.flyout-header) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li:not(.flyout-header) > a {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    min-height: 38px !important;
    height: auto !important;
    margin: 1px 0 !important;
    padding: 8px 12px !important;

    color: #a6b0cf !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    transition: background-color .12s ease, color .12s ease !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a > i {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: auto !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    color: #7f89a8 !important;
    text-align: center !important;
    flex: 0 0 18px !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a > span:not(.sidebar-new-badge) {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere !important;

    color: inherit !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a:hover,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li.mm-active > a,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a.active {
    color: #ffffff !important;
    background: rgba(91, 115, 232, .20) !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a:hover i,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li.mm-active > a i,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a.active i {
    color: #5b73e8 !important;
}

/* -------------------------------
   VELOCIDAD SUBMENÚS
-------------------------------- */

#sidebar-menu .sub-menu,
#sidebar-menu .collapse,
#sidebar-menu .collapsing,
#sidebar-menu .mm-collapse,
#sidebar-menu .mm-collapsing {
    transition: none !important;
    animation: none !important;
}

#sidebar-menu .collapsing,
#sidebar-menu .mm-collapsing {
    height: auto !important;
    overflow: hidden !important;
    transition: none !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu.mm-show {
    display: block !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu:not(.mm-show) {
    display: none !important;
}
/* -------------------------------
   MEGA MENU TOPBAR
-------------------------------- */

.dropdown-megamenu {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(91,115,232,0.3) transparent;
}

.dropdown-megamenu::-webkit-scrollbar {
    width: 5px;
}

.dropdown-megamenu::-webkit-scrollbar-thumb {
    background: rgba(91,115,232,0.35);
    border-radius: 10px;
}

.dropdown-megamenu .row.mt-3 {
    border-top: 1px solid #e9eaed !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
}

.dropdown-megamenu h5.font-size-14 {
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #f0f1f5 !important;
    color: #343a40 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dropdown-megamenu .megamenu-list {
    padding-left: 0 !important;
}

.dropdown-megamenu .megamenu-list li {
    list-style: none !important;
    margin-bottom: 1px !important;
}

.dropdown-megamenu .megamenu-list li a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 6px !important;
    font-size: 13px !important;
    color: #74788d !important;
    border-radius: 4px !important;
    transition: color .15s, background .15s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.dropdown-megamenu .megamenu-list li a:hover {
    color: #5b73e8 !important;
    background: rgba(91,115,232,0.07) !important;
}

.dropdown-megamenu .megamenu-list li a i {
    font-size: 14px !important;
    min-width: 16px !important;
    color: #a6b0cf !important;
    flex-shrink: 0 !important;
}

.dropdown-megamenu .megamenu-list li a:hover i {
    color: #5b73e8 !important;
}

/* -------------------------------
   RESPONSIVE
-------------------------------- */

@media (max-width: 991px) {
    .navbar-brand-box {
        width: 70px !important;
        min-width: 70px !important;
    }

    .vertical-menu {
        top: 70px !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .footer {
        left: 0 !important;
    }
}

/* =========================================================
   FIX FINAL - ICONO PADRE ACTIVO EN MENÚ CONTRAÍDO
   Cuando estoy dentro de un módulo, el icono principal queda azul
========================================================= */

body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.active > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.has-arrow > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > a.active > i {
    color: #5b73e8 !important;
}

/* Refuerzo para Boxicons/íconos que pintan desde ::before */
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.active > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.has-arrow > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > a.active > i::before {
    color: #5b73e8 !important;
}

/* Mantener azul aunque pases el mouse por el módulo activo */
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active:hover > a > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active:hover > a > i::before {
    color: #5b73e8 !important;
}

/* =========================================================
   FIX - ICONO DEL SUBMÓDULO ACTIVO EN FLYOUT CONTRAÍDO
   El texto puede quedar blanco, pero el icono debe quedar azul
========================================================= */

body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a.active > i {
    color: #5b73e8 !important;
}

/* Refuerzo para Boxicons / Bootstrap Icons / icon fonts */
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a.active > i::before {
    color: #5b73e8 !important;
}

/* Mantener el icono azul aunque el submódulo activo tenga fondo seleccionado */
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a:hover > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active:hover > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a:hover > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active:hover > i::before {
    color: #5b73e8 !important;
}

/* =========================================================
   FIX - ICONO DEL MÓDULO PADRE ACTIVO EN MENÚ EXPANDIDO
   Ejemplo: Contabilidad, Inventario, Ventas, etc.
========================================================= */

body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active > a > i,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.has-arrow > i,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > a.active > i {
    color: #5b73e8 !important;
}

/* Refuerzo para icon fonts / Boxicons */
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active > a > i::before,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.has-arrow > i::before,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > a.active > i::before {
    color: #5b73e8 !important;
}

/* Mantener azul al pasar mouse por el módulo activo */
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active:hover > a > i,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active:hover > a > i::before {
    color: #5b73e8 !important;
}

/* =========================================================
   SIDEBAR - BOTÓN NUEVO EN SUBMENÚ
   El texto del item mantiene su URL normal.
   El botón NUEVO redirige a la URL de creación.
========================================================= */

body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 48px !important;
    max-width: none !important;
    height: 18px !important;

    margin-left: auto !important;
    padding: 0 7px !important;

    border-radius: 4px !important;
    background: #3b194d !important;
    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;

    overflow: visible !important;
    text-overflow: unset !important;

    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge:hover,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge:hover,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a > .sidebar-new-badge,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a > .sidebar-new-badge,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active > .sidebar-new-badge,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active > .sidebar-new-badge {
    background: #5b73e8 !important;
    color: #ffffff !important;
}

#sidebar-menu .sub-menu > li > a .sidebar-new-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 46px !important;
    max-width: none !important;
    height: 18px !important;

    margin-left: auto !important;
    padding: 0 7px !important;

    border-radius: 4px !important;
    background: #3b194d !important;
    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: 0 !important;

    overflow: visible !important;
    text-overflow: unset !important;
}

#sidebar-menu .sub-menu > li > a:hover .sidebar-new-badge,
#sidebar-menu .sub-menu > li.mm-active > a .sidebar-new-badge,
#sidebar-menu .sub-menu > li > a.active .sidebar-new-badge {
    background: #5b73e8 !important;
    color: #ffffff !important;
}

/* Etiqueta informativa "Nuevo" de un submódulo (no es un acceso directo: sin clic, color verde).
   Usa las mismas reglas de tamaño/posición de .sidebar-new-badge y solo cambia color y cursor. */
#sidebar-menu .sub-menu > li > a .sidebar-new-badge.sidebar-new-badge--label,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge.sidebar-new-badge--label,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge.sidebar-new-badge--label {
    background: #16a34a !important;
    color: #ffffff !important;
    cursor: inherit !important;
    min-width: 40px !important;
    margin-left: auto !important;
    pointer-events: none;
}
#sidebar-menu .sub-menu > li > a:hover .sidebar-new-badge.sidebar-new-badge--label,
#sidebar-menu .sub-menu > li.mm-active > a .sidebar-new-badge.sidebar-new-badge--label,
#sidebar-menu .sub-menu > li > a.active .sidebar-new-badge.sidebar-new-badge--label {
    background: #15803d !important;
}

/* =========================================================
   MENÚ FLOTANTE (opcional) — Configuraciones > "Menú flotante"
   Se activa con la clase html.nx-floating (preferencia guardada
   en localStorage 'nx_floating_menu'; ver assets/js/app.js y el
   script temprano de partials/head-css.php).
   Solo escritorio (>= 992px). En móvil/tablet queda el diseño normal.
   Desactivado (por defecto) NO aplica ninguna regla de este bloque.
========================================================= */

@media (min-width: 992px) {
    html.nx-floating {
        --nx-fm-gap: 12px;
        --nx-fm-radius: 16px;
        --nx-fm-top: 12px;
        --nx-fm-bar-h: 70px;
        --nx-fm-side-w: 250px;
        --nx-fm-shadow: 0 8px 28px rgba(18, 38, 63, .12), 0 2px 6px rgba(18, 38, 63, .06);
    }

    html.nx-floating[data-bs-theme="dark"] {
        --nx-fm-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    }

    /* Animación suave solo mientras se activa/desactiva el switch */
    html.nx-fm-anim #page-topbar,
    html.nx-fm-anim .vertical-menu,
    html.nx-fm-anim .main-content,
    html.nx-fm-anim .footer,
    html.nx-fm-anim .page-content {
        transition: top .25s ease, left .25s ease, right .25s ease, bottom .25s ease,
                    margin .25s ease, padding .25s ease, border-radius .25s ease,
                    box-shadow .25s ease !important;
    }

    /* ---- Topbar: tarjeta flotante ---- */
    html.nx-floating #page-topbar {
        top: var(--nx-fm-top) !important;
        left: var(--nx-fm-gap) !important;
        right: var(--nx-fm-gap) !important;
        width: auto !important;
        border-radius: var(--nx-fm-radius) !important;
        box-shadow: var(--nx-fm-shadow) !important;
    }

    html[data-bs-theme="dark"].nx-floating #page-topbar {
        border: 1px solid rgba(255, 255, 255, .06);
    }

    /* El bloque del logo es la parte izquierda de la tarjeta: sigue el radio */
    html.nx-floating .navbar-brand-box {
        border-radius: var(--nx-fm-radius) 0 0 var(--nx-fm-radius) !important;
    }

    /* ---- Sidebar: tarjeta flotante propia, separada del topbar ---- */
    html.nx-floating .vertical-menu {
        top: calc(var(--nx-fm-top) + var(--nx-fm-bar-h) + var(--nx-fm-gap)) !important;
        left: var(--nx-fm-gap) !important;
        bottom: var(--nx-fm-gap) !important;
        border-radius: var(--nx-fm-radius) !important;
        box-shadow: var(--nx-fm-shadow) !important;
    }

    html.nx-floating .vertical-menu .h-100 {
        height: calc(100vh - var(--nx-fm-top) - var(--nx-fm-bar-h) - (var(--nx-fm-gap) * 2)) !important;
        border-radius: var(--nx-fm-radius) !important;
    }

    html.nx-floating .vertical-menu .simplebar-content-wrapper,
    html.nx-floating .vertical-menu .simplebar-mask {
        border-radius: var(--nx-fm-radius) !important;
    }

    /* ---- Contenido: se corre para dejar el margen flotante ---- */
    html.nx-floating .main-content {
        margin-left: calc(var(--nx-fm-side-w) + (var(--nx-fm-gap) * 2)) !important;
    }

    html.nx-floating body.vertical-collpsed .main-content {
        margin-left: calc(70px + (var(--nx-fm-gap) * 2)) !important;
    }

    html.nx-floating .page-content {
        padding-top: calc(var(--nx-fm-top) + var(--nx-fm-bar-h) + 24px) !important;
    }

    html.nx-floating .footer {
        left: calc(var(--nx-fm-side-w) + (var(--nx-fm-gap) * 2)) !important;
    }

    html.nx-floating body.vertical-collpsed .footer {
        left: calc(70px + (var(--nx-fm-gap) * 2)) !important;
    }

    /* Colapsado: el flyout es una tarjeta propia (ver bloque FLYOUT arriba);
       el script de partials/footer.php lo separa 8px de la tarjeta del sidebar. */
    html.nx-floating body.vertical-collpsed .vertical-menu .simplebar-content-wrapper {
        border-radius: var(--nx-fm-radius) !important;
    }
}

/* La cabecera del flyout (li.flyout-header, creada por partials/footer.php) solo existe visualmente con el menú contraído */
body:not(.vertical-collpsed) #sidebar-menu li.flyout-header {
    display: none !important;
}

/* =========================================================
   Panel de Configuraciones: tarjeta destacada "Menú flotante"
   (partials/right-sidebar.php, primera opción del panel)
========================================================= */
.right-bar .nx-fm-card {
    position: relative;
    padding: 16px 12px 12px;
    border: 1px solid rgba(91, 115, 232, .38);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(91, 115, 232, .10), rgba(91, 115, 232, .03));
    box-shadow: 0 4px 14px rgba(91, 115, 232, .10);
}

.right-bar .nx-fm-badge {
    position: absolute;
    top: -9px;
    right: 14px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #5b73e8;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 16px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(91, 115, 232, .4);
}

.right-bar .nx-fm-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(91, 115, 232, .16);
    color: #5b73e8;
    font-size: 22px;
}

.right-bar .nx-fm-text {
    display: block;
    cursor: pointer;
    min-width: 0;
}

.right-bar .nx-fm-title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--bs-heading-color, inherit);
}

.right-bar .nx-fm-desc {
    display: block;
    cursor: pointer;
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--bs-secondary-color, #74788d);
}

.right-bar .nx-fm-switch .form-check-input {
    width: 2.4em;
    height: 1.35em;
    margin: 0;
    cursor: pointer;
    float: none;
}

.right-bar .nx-fm-preview {
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}