:root {
    --wkadmin-primary: #174b72;
    --wkadmin-background: #f2f5f9;
    --wkadmin-sidebar-width: 260px;
    --wkadmin-sidebar: #122f46;
}

body.wkadmin {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--wkadmin-background);
    color: #243547;
}

.wkadmin-header {
    padding: 1.25rem 0;
    background: var(--wkadmin-primary);
}

.wkadmin-brand {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.wkadmin-brand:hover,
.wkadmin-brand:focus {
    color: #e0efff;
}

.wkadmin-auth {
    max-width: 540px;
    padding-top: clamp(1.5rem, 6vh, 4rem);
}

.wkadmin-content {
    width: 100%;
    max-width: none;
    padding: 2rem;
}

.wkadmin-content > section {
    min-width: 0;
}

.wkadmin-menu {
    --bs-offcanvas-width: var(--wkadmin-sidebar-width);
    --bs-offcanvas-bg: var(--wkadmin-sidebar);
    --bs-offcanvas-color: #eef4fa;
}

.wkadmin-menu .offcanvas-header {
    display: flex;
    padding: 1.5rem;
    background: var(--wkadmin-sidebar);
    color: #eef4fa;
}

.wkadmin-menu .offcanvas-body {
    padding: 0 1rem 1.5rem;
    background: var(--wkadmin-sidebar);
}

.wkadmin-user {
    max-width: 24rem;
    overflow-wrap: anywhere;
    color: #fff;
}

.wkadmin-account {
    margin-left: auto;
}

.wkadmin-footer {
    margin-top: auto;
    border-top: 1px solid #c5d4e2;
    background: #dce7f1;
    color: #344f65;
}

.wkadmin.wkadmin-private .wkadmin-menu .nav-link {
    border-radius: .5rem;
    padding: .8rem 1rem;
    color: #eef4fa;
}

.wkadmin.wkadmin-private .wkadmin-menu .nav-link:hover,
.wkadmin.wkadmin-private .wkadmin-menu .nav-link:focus-visible {
    background: #244c6b;
}

.wkadmin.wkadmin-private .wkadmin-menu .nav-link.active {
    background: var(--wkadmin-primary);
    color: #fff;
}

.wkadmin .card {
    border-radius: 1rem;
}

.wkadmin .btn-primary {
    --bs-btn-bg: var(--wkadmin-primary);
    --bs-btn-border-color: var(--wkadmin-primary);
    --bs-btn-hover-bg: #103650;
    --bs-btn-hover-border-color: #103650;
    --bs-btn-active-bg: #103650;
    --bs-btn-active-border-color: #103650;
}

.wkadmin-links {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
    text-align: center;
}

.wkadmin a:not(.btn):not(.wkadmin-brand) {
    color: var(--wkadmin-primary);
}

@media (min-width: 992px) {
    body.wkadmin-private {
        display: grid;
        grid-template-columns: var(--wkadmin-sidebar-width) minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "menu cabecera" "menu contenido" "menu pie";
    }

    .wkadmin-private > .wkadmin-header {
        grid-area: cabecera;
    }

    .wkadmin-private > .wkadmin-menu {
        grid-area: menu;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        align-self: start;
        height: 100vh;
        height: 100dvh;
        background-color: var(--wkadmin-sidebar) !important;
    }

    .wkadmin-private > .wkadmin-menu .offcanvas-body {
        flex: 1;
        overflow-y: auto;
    }

    .wkadmin-private > .wkadmin-content {
        grid-area: contenido;
    }

    .wkadmin-private > .wkadmin-footer {
        grid-area: pie;
        margin-top: 0;
    }

    .wkadmin-private .wkadmin-header > .container {
        max-width: none;
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

@media (max-width: 991.98px) {
    .wkadmin-content {
        padding: 1.5rem 1rem;
    }

    .wkadmin-user {
        max-width: 12rem;
    }
}

@media (max-width: 575.98px) {
    .wkadmin-user {
        max-width: 9rem;
        font-size: .875rem;
        text-align: right;
    }
}