src/scss/modules/_menu-lateral-responsive.scss
/**
 * En las páginas con menú lateral, según el media query, 
 * convierte el menú en un desplegable para la 
 * visualización en dispositivos móviles.
 */
.page-sidebar {
    .btn-title a {
        font-weight: bold !important;
    }

    .nav-pills {
        li.active {
            > a,
            > a:hover,
            > a:focus {
                font-weight: bold !important;
                border-radius: 0;
            }
        }

        li ul li a::before {
            content: "•";
            color: var(--primary);
            margin: 0px 7px;
        }

        li > a {
            color: var(--primary);
            border-radius: 0;
        }

        li.active a.active::before {
            color: white;
        }

        li > a:visited::before {
            color: var(--uva);
        }

        $start: 7;
        $steps: 8;
        $increment: 13;

        @for $i from 1 through $steps {
            $selector: "";

            @for $k from 1 through $i {
                $selector: $selector + "> ul > li";
            }

            > li > ul > li #{$selector} > a::before {
                margin-left: #{$start + $i * $increment}px;
            }
        }
    }
}

/* Escritorio */
.card {
    width: 100%; // reseteo valores impuestos

    *,
    &.card-body * {
        @include family-sans-serif-attributes;
    }
    :has(.fa) i {
        font-family: "FontAwesome";
    }


    &.card-body {
        details {
            // Redefinimos valores del componente details.
            // @see https://github.com/argob/poncho/blob/master/src/scss/modules/_details.scss
            --summary-padding-s: 20px;
            --summary-padding-e: 8px;
            --summary-padding-t: 8px;
            --summary-padding-b: 8px;

            // --caret-background:transparent;
            // --circle-size:36px;

            border: none;
            border-radius: 4px;
        }

        summary {
            display: none;
            animation: none;
            padding-left: 1em;
        }

        .details-info {
            padding: 0;
            border: none;
        }
    }
}

@media only screen and (max-width: 991px) {
    .page-sidebar {
        .nav-pills {
            li.active a.active {
                color: #fff !important;
            }

            li > a:visited {
                color: var(--uva);
            }
        }
    }
}

@media (max-width: 991px) {
    .card {
        margin-bottom: 2rem;

        &.card-body {
            > details {
                border: 1px solid #ccc;

                > summary {
                    display: flex !important;
                }
            }

            .details-info {
                border-top: 2px solid var(--arg-negro);
            }

            .page-sidebar {
                margin-bottom: 0;
            }
        }
    }

    .fa.fa-list.pe-3 {
        color: gray;
        font-size: 22px;
    }

    /** 
     * Controla la disposición de los bloques según el media.
     * @todo Revisar la necesidad de los _!important_
     */
    .device-panel-control {
        display: flex;
        flex-direction: column !important;

        > article[class*="col-md-"] {
            order: 2;
        }

        > aside[class*="col-md-"] {
            order: 1;
        }
    }
}
