/* Barra de la página; los paneles internos conservan su propio diseño. */
@media (forced-colors: none) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #7b8fa6 #f3f6fa;
    }

    /* Chromium/WebKit: usar el tamaño y los estados personalizados. */
    @supports selector(::-webkit-scrollbar) {
        html {
            scrollbar-width: auto;
            scrollbar-color: auto;
        }
    }

    html::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    html::-webkit-scrollbar-track,
    html::-webkit-scrollbar-corner {
        background: #f3f6fa;
    }

    html::-webkit-scrollbar-thumb {
        min-height: 40px;
        border: 2px solid #f3f6fa;
        border-radius: 999px;
        background: #7b8fa6;
    }

    html::-webkit-scrollbar-thumb:hover {
        background: #506b89;
    }

    html::-webkit-scrollbar-thumb:active {
        background: #254d76;
    }

    html::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }
}