/* Header fijo al hacer scroll */
.app-topbar {
    position: fixed !important;
    top: 0 !important;
    left: var(--highdmin-sidenav-width);
    right: 0;
    width: auto;
    margin-left: 0 !important;
    z-index: 1000;
}

/* Color line fija encima del header */
.color-line {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    width: 100%;
}

/* Compensar el espacio que ocupa el header fijo */
.page-content {
    padding-top: calc(var(--highdmin-topbar-height) + 1.5rem) !important;
}

/* Sidenav condensado (70px) */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .app-topbar {
    left: var(--highdmin-sidenav-width-sm);
    margin-left: 0 !important;
}

/* Sidenav compact (160px) */
html[data-sidenav-size=compact]:not([data-layout=topnav]) .app-topbar {
    left: var(--highdmin-sidenav-width-md);
    margin-left: 0 !important;
}

/* Sidenav sm-hover (70px) */
html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .app-topbar {
    left: var(--highdmin-sidenav-width-sm);
    margin-left: 0 !important;
}

/* Sidenav full/fullscreen (sin margen) */
html[data-sidenav-size=full]:not([data-layout=topnav]) .app-topbar,
html[data-sidenav-size=fullscreen]:not([data-layout=topnav]) .app-topbar {
    left: 0;
    margin-left: 0 !important;
}

/* Layout topnav (sin sidenav) */
html[data-layout=topnav] .app-topbar {
    left: 0;
    margin-left: 0 !important;
}

/* Móvil: header ocupa todo el ancho */
@media (max-width: 767.98px) {
    .app-topbar {
        left: 0 !important;
        right: 0;
        width: 100%;
        margin-left: 0 !important;
    }
}

/* El sidenav oculto no debe interceptar eventos de toque */
html[data-sidenav-size=full]:not([data-layout=topnav]) .sidenav-menu {
    pointer-events: none;
}
html[data-sidenav-size=full]:not([data-layout=topnav]).sidebar-enable .sidenav-menu {
    pointer-events: auto;
}