: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);
}

.wkadmin-empresa-menu {
    padding: 1rem 1rem 0;
    border: 2px solid #174b72;
    border-radius: .75rem .75rem 0 0;
    background: #174b72;
    box-shadow: 0 3px 0 #b5c9da;
}

.wkadmin-empresa-menu-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
    color: #fff;
    font-weight: 700;
}

.wkadmin-empresa-menu-ayuda {
    color: #e2eff8;
    font-size: .875rem;
    font-weight: 400;
}

.wkadmin-empresa-tabs {
    gap: .4rem;
}

.wkadmin .wkadmin-empresa-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 3.25rem;
    padding: .7rem 1.15rem;
    border: 1px solid #a4c4d9;
    border-bottom: 0;
    border-radius: .6rem .6rem 0 0;
    background: #d7e8f4;
    color: #103650;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.wkadmin .wkadmin-empresa-tabs .nav-link .bi {
    font-size: 1.15rem;
    line-height: 1;
}

.wkadmin .wkadmin-empresa-tabs .nav-link:hover {
    border-color: #fff;
    background: #f0f8ff;
    color: #103650;
}

.wkadmin .wkadmin-empresa-tabs .nav-link:focus-visible {
    outline: 3px solid #ffbd70;
    outline-offset: -4px;
}

.wkadmin .wkadmin-empresa-tabs .nav-link.active,
.wkadmin .wkadmin-empresa-tabs .nav-link.active:hover {
    border-color: #fff;
    background: #fff;
    box-shadow: inset 0 4px 0 #e45b0a;
    color: #103650;
    text-decoration: none;
}

.wkadmin .wkadmin-empresa-tabs .nav-link.active .bi {
    color: #bb4700;
}

@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-empresa-tabs .nav-item {
        flex: 1 1 9rem;
    }

    .wkadmin-user {
        max-width: 9rem;
        font-size: .875rem;
        text-align: right;
    }
}