/**
 * Estilos para todos los Offcanvas.
 * Unifica el diseño del menú principal y la TOC móvil, y corrige el z-index.
 *
 * @version 1.2.9
 * @date 2025-07-14
 * @author Baxahaun
 * // PEV_REF: CORE_FIX_02_MinorFixes
 */

/* ================================================================
   1. Efecto de Transformación del Contenido Principal
   ================================================================ */
#primary {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center right;
    background-color: var(--bs-body-bg);
    z-index: 1;
    position: relative;
}

body.offcanvas-open #primary {
    transform: scale(0.92) translateX(-80px) perspective(1200px) rotateY(5deg);
    filter: brightness(0.5);
    pointer-events: none;
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

/* ================================================================
   2. Estilo Base para TODOS los Offcanvas del Tema
   ================================================================ */
.offcanvas.mc-offcanvas-menu {
    background-color: var(--bs-secondary) !important;
    color: var(--pc-platinum) !important;
    max-width: 320px;
    width: 88%;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 1045 !important; /* CRÍTICO: Asegura que esté por encima del header (1020) */
}

.mc-offcanvas-menu .offcanvas-header {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
    padding: 1rem 1.25rem;
}

.mc-offcanvas-menu .offcanvas-title {
    color: var(--bs-white) !important;
    font-weight: 600;
    font-family: var(--bs-heading-font-family);
}

.mc-offcanvas-menu .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}
.mc-offcanvas-menu .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg) scale(1.1);
}

.offcanvas.show .mc-offcanvas-menu__body > * {
    animation: fadeInFromBottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}
.offcanvas.show .mc-offcanvas-menu__body > *:nth-child(1) { animation-delay: 0.15s; }
.offcanvas.show .mc-offcanvas-menu__body > *:nth-child(2) { animation-delay: 0.2s; }
.offcanvas.show .mc-offcanvas-menu__body > *:nth-child(3) { animation-delay: 0.25s; }

@keyframes fadeInFromBottom {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.mc-offcanvas-menu hr { border-color: rgba(255, 255, 255, 0.15) !important; margin: 1rem 1.25rem; }

/* ================================================================
   3. Búsqueda y Navegación
   ================================================================ */

.mc-offcanvas-menu .search-form-container-mobile { padding: 0.75rem 1.25rem; }
.mc-offcanvas-menu .search-field {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--bs-white) !important;
}
.mc-offcanvas-menu .search-field::placeholder { color: rgba(255, 255, 255, 0.5) !important; }
.mc-offcanvas-menu .search-field:focus {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: var(--pc-air-superiority-blue) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35), 0 0 10px rgba(var(--bs-primary-rgb), 0.3) !important;
}
.mc-offcanvas-menu .input-group-text.search-icon-display {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.mc-offcanvas-menu .search-icon-display .material-symbols-filled { color: rgba(255, 255, 255, 0.7) !important; }

.mc-offcanvas-menu .mc-offcanvas-menu__search-results {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0.5rem 1.25rem 0 1.25rem !important;
    width: calc(100% - 2.5rem) !important;
    border-radius: 0;
    position: relative;
    z-index: 10;
}
.mc-offcanvas-menu .mc-offcanvas-menu__search-results .list-group-item {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0.5rem;
}

.mc-offcanvas-menu .mc-offcanvas-menu__search-results .list-group-item a {
    padding: 0.75rem !important;
    display: block;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: var(--bs-border-radius-sm);
    transition: background-color 0.2s ease-in-out;
}
.mc-offcanvas-menu .mc-offcanvas-menu__search-results .search-result-title {
    color: var(--bs-white) !important;
    font-weight: 600;
    margin-bottom: 0.25rem !important;
}
.mc-offcanvas-menu .mc-offcanvas-menu__search-results .search-result-excerpt {
    color: var(--pc-platinum) !important;
    opacity: 0.8;
    line-height: 1.4;
    font-size: 0.85rem;
}

.mc-offcanvas-menu .mc-offcanvas-menu__search-results .list-group-item a:hover,
.mc-offcanvas-menu .mc-offcanvas-menu__search-results .list-group-item a:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    outline: none;
}
.mc-offcanvas-menu .mc-offcanvas-menu__search-results .list-group-item a:hover .search-result-title {
    color: var(--pc-air-superiority-blue) !important;
}

.mc-offcanvas-menu .search-highlight {
    background-color: #ffc107 !important;
    color: #000 !important;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    font-weight: 600;
}

/* Estilos para los enlaces de navegación (Menú Principal y TOC) */
.mc-offcanvas-menu .mc-offcanvas-menu__nav,
#chapter-toc-mobile {
    list-style: none;
    padding: 0 0.75rem;
    margin: 0;
    transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, visibility 0.3s;
    overflow: hidden;
}

.mc-offcanvas-menu .mc-offcanvas-menu__nav--hidden {
    opacity: 0;
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

.mc-offcanvas-menu .nav-link,
.mc-offcanvas-menu .dropdown-item,
.mc-offcanvas-menu .toc-link {
    color: var(--pc-platinum) !important;
    font-weight: 500;
    padding: 0.6rem 0.5rem;
    border-radius: var(--bs-border-radius-sm);
    border-left: 4px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, padding-left 0.2s ease;
    text-decoration: none;
    display: block;
}
.mc-offcanvas-menu .dropdown-item { padding-left: 2rem; }

.mc-offcanvas-menu .nav-link:hover,
.mc-offcanvas-menu .nav-link:focus,
.mc-offcanvas-menu .dropdown-item:hover,
.mc-offcanvas-menu .dropdown-item:focus,
.mc-offcanvas-menu .toc-link:hover,
.mc-offcanvas-menu .toc-link:focus {
    color: var(--bs-white) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    border-left-color: var(--pc-air-superiority-blue);
    transform: translateX(4px);
    padding-left: calc(0.5rem + 4px);
}
.mc-offcanvas-menu .dropdown-item:hover,
.mc-offcanvas-menu .dropdown-item:focus {
    padding-left: calc(2rem + 4px);
}

.mc-offcanvas-menu .nav-item.current-menu-item > .nav-link,
.mc-offcanvas-menu .nav-item.current-menu-ancestor > .nav-link,
.mc-offcanvas-menu .navbar-nav .show > .nav-link,
.mc-offcanvas-menu .toc-link.active {
    color: var(--bs-white) !important;
    font-weight: 700;
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border-left-color: var(--pc-air-superiority-blue);
}

.mc-offcanvas-menu .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    margin: 0 !important;
    padding: 0.5rem 0;