/* Shared appearance contract. See ViperDB/docs/estilo-aparencia.md. */
:root {
    --viper-tab-color: #212529;
    --viper-tab-border: #212529;
    --viper-tab-divider: #dee2e6;
    --viper-tab-hover: #e9ecef;
    --viper-tab-padding: .65rem 1.15rem;
    --viper-section-background: #fff;
    --viper-section-color: var(--viper-tab-color);
}

/* Opt-in shared accordion appearance, independent of Bootstrap's blue state. */
.viper-accordion {
    --bs-accordion-active-bg: var(--viper-section-background);
    --bs-accordion-active-color: var(--viper-section-color);
}

.viper-accordion .accordion-button,
.viper-accordion .accordion-button:not(.collapsed) {
    background: var(--viper-section-background);
    color: var(--viper-section-color);
    font-weight: 600;
    box-shadow: none;
}

.viper-accordion .accordion-button:hover {
    background: var(--viper-tab-hover);
}

.viper-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--viper-tab-border);
    outline-offset: -2px;
}

.viper-accordion .accordion-button::after {
    filter: grayscale(1);
}

:is(.nav-tabs, .nav-pills, .viper-tabs) {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--viper-tab-divider);
}

:is(.nav-tabs, .nav-pills, .viper-tabs) :is(.nav-link, .viper-tab) {
    appearance: none;
    flex-shrink: 0;
    white-space: nowrap;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--viper-tab-color) !important;
    font: inherit;
    font-weight: 400;
    padding: var(--viper-tab-padding);
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

:is(.nav-tabs, .nav-pills, .viper-tabs) > .nav-item {
    flex-shrink: 0;
}

:is(.nav-tabs, .nav-pills, .viper-tabs) :is(.nav-link, .viper-tab):hover {
    background: var(--viper-tab-hover);
    border-bottom-color: transparent;
}

:is(.nav-tabs, .nav-pills, .viper-tabs) :is(.nav-link, .viper-tab):is(.active, [aria-selected="true"], [aria-current="page"]) {
    background: transparent;
    border-bottom-color: var(--viper-tab-border);
    font-weight: 600;
}

:is(.nav-tabs, .nav-pills, .viper-tabs) :is(.nav-link, .viper-tab):focus-visible {
    outline: 0;
    box-shadow: inset 0 -5px 0 var(--viper-tab-border);
}

:is(.nav-tabs, .nav-pills, .viper-tabs) :is(.nav-link, .viper-tab):is(:disabled, .disabled, [aria-disabled="true"]) {
    opacity: .5;
    cursor: not-allowed;
    background: transparent;
}
:root {
    --viper-mobile-menu-backdrop: rgba(0, 0, 0, .35);
}

.viper-mobile-menu-toggle,
.viper-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .viper-app-shell {
        --viper-mobile-menu-width: min(320px, calc(100vw - 72px - env(safe-area-inset-right)));
    }

    .viper-app-shell > .viper-app-sider {
        display: none;
    }

    .viper-app-shell > .viper-app-sider.mobile-open {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1021;
        width: var(--viper-mobile-menu-width);
        max-width: var(--viper-mobile-menu-width);
        overflow: auto;
        overscroll-behavior: contain;
    }

    .viper-app-sider .b-bar-toggler {
        display: none;
    }

    .viper-app-sider.mobile-open .b-layout-sider-content,
    .viper-app-sider.mobile-open .b-bar-vertical-inline {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .viper-mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: max(16px, env(safe-area-inset-left));
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 48px;
        height: 48px;
        border-radius: 50%;
        z-index: 1022;
    }

    .viper-app-sider.mobile-open ~ .viper-mobile-menu-toggle {
        left: calc(var(--viper-mobile-menu-width) + 8px);
    }

    .viper-mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        border: 0;
        padding: 0;
        background: var(--viper-mobile-menu-backdrop);
        z-index: 1020;
    }
}