/* ABCTIC vertical menu: one responsive source of truth. */
.leo-verticalmenu.vertical-top-menu,
.leo-verticalmenu.vertical-top-menu > .title_block,
.leo-verticalmenu.vertical-top-menu > .box-content {
    box-sizing: border-box;
}

/* Let the theme own menu state and remove geometry animations that cause jumps. */
.leo-verticalmenu.vertical-top-menu {
    transition: none;
}

.leo-verticalmenu.vertical-top-menu > .title_block {
    width: 100%;
    margin: 0;
    background: transparent;
    color: #FFFFFF;
}

.leo-verticalmenu.vertical-top-menu > .box-content {
    transition: none;
}

/* Desktop: native Leo sidebar, in the header layout rather than fixed to the viewport. */
@media (min-width: 992px) {
    .group-vertical-menu .leo-verticalmenu.vertical-top-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 250px;
        background: transparent;
    }

    .group-vertical-menu .leo-verticalmenu.vertical-top-menu > .title_block {
        background: transparent;
    }

    .group-vertical-menu .leo-verticalmenu.vertical-top-menu > .box-content {
        position: static;
        display: block;
    }
}

/* Tablet: keep the trigger visible without the desktop blue stripe. */
@media (min-width: 641px) and (max-width: 991px) {
    .group-vertical-menu .leo-verticalmenu.vertical-top-menu {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        background: transparent;
    }

    .group-vertical-menu .leo-verticalmenu.vertical-top-menu > .title_block {
        background: #F3F5F7;
        color: #001F46;
    }

    .group-vertical-menu .leo-verticalmenu.vertical-top-menu > .title_block::before {
        color: #001F46;
    }

    .off-canvas-nav-megamenu .off-canvas-button-megamenu {
        background: #F3F5F7;
        color: #001F46;
    }
}

/* Mobile: the compact category trigger is intentionally blue and visible. */
@media (max-width: 640px) {
    .group-vertical-menu .leo-verticalmenu.vertical-top-menu {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        background: transparent;
    }

    .group-vertical-menu .leo-verticalmenu.vertical-top-menu > .title_block {
        background: #006CF3;
        color: #FFFFFF;
    }

    .group-vertical-menu .leo-verticalmenu.vertical-top-menu > .title_block::before {
        color: #FFFFFF;
    }

    .off-canvas-nav-megamenu .off-canvas-button-megamenu {
        background: #006CF3;
        color: #FFFFFF;
    }
}

/* Preserve the compact toolbar only where the theme's mobile header uses it. */
@media (max-width: 767px) {
    #header .box-header .group-vertical-menu .ApMegamenu,
    #header .box-header .group-vertical-menu .leo-verticalmenu {
        width: 100%;
        height: 72px;
        background: transparent;
    }

    #header .box-header .group-vertical-menu .verticalmenu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        height: 72px;
        padding: 0;
        margin: 0;
        font-size: 0;
        white-space: nowrap;
        overflow: visible;
    }

    #header .box-header .group-vertical-menu .verticalmenu-button::before {
        margin: 0;
        font-size: 20px;
    }
}

/* The native theme still controls display via .active; this only bounds the open panel. */
@media (max-width: 991px) {
    .leo-verticalmenu.vertical-top-menu.active > .box-content {
        top: 100%;
        left: 15px;
        right: 15px;
        width: auto;
        max-width: calc(100vw - 30px);
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
}


/* Mobile trigger: keep the compact button blue and prevent title wrapping. */
@media (max-width: 640px) {
    #header .box-header .group-vertical-menu .verticalmenu-button {
        background: #006CF3 !important;
        color: #FFFFFF !important;
        font-size: 0 !important;
        line-height: 72px;
        white-space: nowrap;
        overflow: hidden;
    }

    #header .box-header .group-vertical-menu .verticalmenu-button::before {
        color: #FFFFFF !important;
        font-size: 20px !important;
    }
}


/* Desktop trigger: match the header blue and keep the title on one line. */
@media (min-width: 992px) {
    #header .box-header .group-vertical-menu .verticalmenu-button {
        background: #001F46 !important;
        color: #FFFFFF !important;
        padding-right: 20px !important;
        padding-top: 13px !important;
        padding-bottom: 7px !important;
        white-space: nowrap;
        overflow: hidden;
    }

    #header .box-header .group-vertical-menu .verticalmenu-button::before {
        color: #FFFFFF !important;
    }
}


/* Category sidebar title: keep the header blue in every link state. */
.sidebar .block.block-categories .title_block,
.sidebar .block.block-categories .title_block:hover,
.sidebar .block.block-categories .title_block:focus,
.sidebar .block.block-categories .title_block:active {
    background: #001F46 !important;
    color: #FFFFFF !important;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar .block.block-categories .title_block a,
.sidebar .block.block-categories .title_block a:link,
.sidebar .block.block-categories .title_block a:visited,
.sidebar .block.block-categories .title_block a:hover,
.sidebar .block.block-categories .title_block a:focus,
.sidebar .block.block-categories .title_block a:active {
    color: #FFFFFF !important;
}


/* Homepage desktop: pin the vertical menu beneath the fixed header. */
@media (min-width: 992px) {
    body#index .group-vertical-menu .leo-verticalmenu.vertical-top-menu {
        position: fixed;
        top: 65px;
        left: 0;
        width: 250px;
        z-index: 999;
    }
}

/* Homepage desktop: keep the initial header/menu position independent of scroll JS. */
@media (min-width: 992px) {
    body#index #header {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        z-index: 1000 !important;
    }

    body#index #header .header-nav {
        margin-top: 0 !important;
    }

    body#index #page {
        padding-top: 65px !important;
    }

    body#index .group-vertical-menu .leo-verticalmenu.vertical-top-menu {
        position: fixed !important;
        top: 65px !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width: 250px !important;
        transform: none !important;
        z-index: 999 !important;
    }
}

/* Homepage desktop: reserve the fixed sidebar width for the full-width blog area. */
@media (min-width: 992px) {
    body#index > #page > main.flex-1 {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
    }
}

/* Homepage desktop: keep all full-width home content clear of the fixed sidebar. */
@media (min-width: 992px) {
    body#index > #page > #novedades-home-module,
    body#index > #page > section:not(#wrapper):not(#novedades-home-module),
    body#index > #page > #content-wrapper {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
    }
}

/* Homepage: hide the breadcrumb "Inicio" item (only Home link on the homepage). */
body#index .breadcrumb {
    display: none !important;
}

/* Homepage blog category filter bar: match the page white background. */
body#index .page-home > section.border-b.border-border.bg-card {
    background: #FFFFFF !important;
}

/* The large desktop header is 75px tall at this breakpoint. */
@media (min-width: 1500px) {
    body#index #page {
        padding-top: 75px !important;
    }

    body#index .group-vertical-menu .leo-verticalmenu.vertical-top-menu {
        top: 75px !important;
    }
}