:root {
    --surface: #fff;
    --muted: #6b7280;
    --border: #e9edf3;
    --radius: 14px;
}

html,
body {
    height: 100%
}

body {
    background: #f6f8fb
}

/* ===== Sidebar ===== */
.sidebar {
    width: 260px;
    background: #fff;
    border-right: 1px solid var(--border);
}

/* ✅ RESET de Offcanvas en ≥ md (lo convertimos en panel fijo real) */
@media (min-width:768px) {
    .sidebar.offcanvas-md {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        transform: none !important;
        visibility: visible !important;
        display: block !important;
        /* NO flex (quita comportamiento offcanvas) */
        overflow: hidden;
        /* scroll lo maneja el body interno */
        box-shadow: 0 2px 16px rgba(16, 24, 40, .04);
        background: #fff;
    }

    .sidebar.offcanvas-md .offcanvas-header {
        display: none !important;
    }

    .sidebar.offcanvas-md .offcanvas-body {
        display: block !important;
        /* NO flex */
        height: 100%;
        overflow-y: auto;
        padding: 0 !important;
        /* sin padding extra */
    }
}

/* móvil: el ancho que usa offcanvas */
@media (max-width:767.98px) {
    .sidebar {
        width: 100%
    }
}

/* Main desplazado cuando sidebar está fijo */
.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: 0
}

@media (min-width:768px) {
    .main {
        margin-left: 260px
    }
}

/* Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem .8rem;
    background: #fff;
    border-bottom: 1px solid var(--border)
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #fff;
    /* border: 1px solid var(--border) */
}

/* Brand */
.sidebar .brand {
    border-bottom: 1px dashed var(--border)
}

/* Transiciones suaves en desktop */
@media (min-width:768px) {
    .sidebar.offcanvas-md {
        transition: transform .25s ease, visibility .25s ease;
    }

    .main {
        transition: margin-left .25s ease;
    }
}

/* Estado colapsado en desktop */
@media (min-width:768px) {
    body.sidebar-collapsed .sidebar.offcanvas-md {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
    }

    body.sidebar-collapsed .main {
        margin-left: 0;
        /* ocupa todo el ancho */
    }
}

/* ===== Menú propio (sin .nav de Bootstrap) ===== */
.sb-menu {
    list-style: none;
    margin: 0;
    padding: .35rem .5rem .5rem
}

.sb-item {
    display: block;
    margin: 0
}

.sb-link,
.sb-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    color: #475467;
    padding: .55rem .65rem;
    border-radius: 10px;
    background: transparent;
    border: 0;
    text-decoration: none
}

.sb-link:hover,
.sb-toggle:hover {
    background: #f3f5f7;
    color: inherit
}

.sb-link.active {
    background: #0d6efd;
    color: #fff
}

.sb-link.active i {
    color: #fff
}

.sb-toggle .chevron {
    transition: transform .2s ease
}

.sb-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg)
}

.sb-group .collapse {
    width: 100%;
    margin-top: .25rem
}

.sb-sub {
    margin-left: 1.25rem;
    border-left: 1px solid #e9edf3;
    padding-left: .5rem;
    padding-top: .25rem;
    padding-bottom: .25rem
}

.sb-sub .sb-link {
    padding: .45rem .55rem;
    font-size: .935rem
}

/* Content & cards */
.content {
    padding: 1rem
}

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius)
}

/* Encabezado de página (barra de filtros/acciones) */
.pagebar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .75rem .9rem;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06), 0 2px 6px rgba(16, 24, 40, .04);
}

/* Espaciado cómodo en selects pequeños */
.pagebar .form-select.form-select-sm {
    min-width: 230px;
}

/* Botones (alineación refinada) */
.pagebar .btn {
    display: inline-flex;
    align-items: center
}

/* Select2 alineado al tamaño .form-select-sm */
.select2-container--bootstrap-5 .select2-selection--single {
    height: calc(1.5rem + 2px);
    /* alto del .form-select-sm */
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .375rem;
}

.select2-container--bootstrap-5 .select2-selection__arrow {
    height: calc(1.5rem + 2px);
}

.pagebar .select2-container {
    min-width: 260px;
}

/* mismo mínimo que el select */

/* Footer */
.footer {
    margin-top: auto;
    padding: .75rem 1rem;
    background: #fff;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    z-index: 1020
}